Overview
- Introductions
- Review of the Syllabus
- Topics to be Covered
- Basics/Definitions
Introductions
Who am I?
Who are you?
What brought you here?
Syllabus Review (link)
Class Topics
Internet Mapping Clients: Basic HTML, Javascript, CSS; Google Maps API; OpenLayers javascript library
Geospatial Services Oriented Architectures (SOA)
Open Standards: Open Geospatial Consortium (OGC - WMS, WFS, WCS, KML); Extensible Markup Language (XML)
Desktop client use of Open Standards
Data sharing/publication using Open Standards
Basics
Outline
What is Internet Mapping
- Extended Desktop Mapping
Use of open standards based remote data and map services in desktop applications
- Geospatial Data Sharing
Establishing open standards based services to share geospatial data and mapping capabilities over the Internet
- Web-client Mapping
The delivery of mapping and geospatial data tools through web browsers, again based upon open standards
Definitions
- Internet
The global computer network of computers that typically connect with each other over TCP/IP
- World Wide Web
The subset of applications that are run over the Internet, typically using the HTTP protocol in combination with data (HTML, XML, XHTML), presentation (CSS), and behavior (JavaScript) components
- Mapping
The generation of cartographic products that include map images (pictures of geospatial data) and other elements (e.g. legends, tools, scale information, north-arrow)
- Analysis
The development of models (statistical and otherwise) that enable the exploration of geospatial data and testing of hypotheses using those data
- Open Standards
While the definition varies from one organization to the next, Open Standards are often characterized by the following:
- Developed through a public process by a national or international standards group
- May be implemented royalty-free
- Interoperability
Ability of systems to share data and information with each other
- COTS
Commercial Off-the-Shelf Software. Applications that are “purchased” from vendors, often with license terms that restrict the use the software to the specific platform for which it is licensed. Often comes with implicit or explicit technical support
- Open Source
Software licensed under terms that are consistent with the Open Source definition, which includes access to source code, and freedom to modify and redistribute
- Data
Actual values associated with geographic locations. For example - numeric elevation values associated with locations within a Digital Elevation Model.
- Metadata
Data about a particular data product or service. Metadata provide critical documentation that supports the discovery and use of data products and data and mapping services
Computer Hardware Requirements
- At least 2 GB RAM
- At least 20 GB of available disk space
- Internet Connection (broadband [>728 Kb/sec] recommended)
Software Requirements
- Supported Operating System
- Geographic Information System (GIS)
- Text Editor
- Secure File Transfer Protocol Client
- Secure Shell (SSH) Client
- Web Browser (at least one of the following)
- A desktop Git/GitHub client for your operating system of choice
Overview
- Web Development
- Parts of a web page
- Web Site Components
- Structure (X/HTML)
- Presentation (CSS)
- Behavior (Javascript)
- Simple Web Pages
- More Complete Web Page Example
Web Development
- Requirements
- Web Server
- File location that the web server accesses for requested content
- Files must be readable by all users
- General Process
- Create basic content in HTML or XHTML (structure)
- Change appearance of content through the definitions of styles using CSS (presentation)
- Add dynamic capabilities to content through Javascript (behavior)
- REPEAT over and over and over and over again
Parts of a Web Page
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <html>
<!-- The HTML block is the container for all of your page content -->
<head>
<!-- The head is where you include pointers to external resources
(i.e. style sheets and javascript files), blocks of Javascript code
, styles, etc. -->
<title>The page title also goes in here</title>
</head>
<body>
<!-- The body is where you put all of the content for the page
(i.e. the material that will be displayed in the web browser) -->
<h1>Headers</h1>
<div>Generic blocks of content</div>
<p>Paragraphs</p>
<table>Tables</table>
<img ...>Images</img>
<form ...>Forms</form>
<ul>Unordered Lists</ul>
<ol>Ordered Lists</ol>
<li>List Items</li>
<!-- Javascript can go here as well -->
</body>
</html>
|
Link to example
Web Site Components - Structure
Content is defined in terms of the structural elements available in HTML/XHTML
- Sample HTML/XHTML Tags
- Paragraphs (i.e. blocks of text) are contained within
<p>...</p> tags
- Headings (i.e. section headings, sub-headings) are contained within numerically defined header tags:
<h1>...</h1>, <h2>...</h2>, <h3>...</h3>, etc.
- Tabular data are within
<table>...</table> tags
- List are specified within
<ol>...</ol> or <ul>...</ul> tags, depending upon whether the list is ordered (numbered) or unordered (e.g. bulleted)
- User input elements are put within
<form>...</form> tags
- Blocks of content (i.e. sections or divisions) are defined within
<div>...</div> tags
- Structure is translated into the Document Object Model (DOM) for later use by CSS and Javascript
Web Site Components - Presentation
Modifications to default rendering of HTML/XHTML elements are made through styles defined in CSS
- Styles may be
- defined in an external file that is referenced within the
<head> block (the preferred method when doing “real” web development)
- directly defined within the
<head> block of a web page
- directly embedded in the elements to which they apply (generally not a “Good Thing”)
- When not embedded within an element, a style definition consists of
- A selector
- The style definition, enclosed in “curly-brackets”, separated by “semi-colons”
- For example:
h1 {color:red; font-size:18px;}
CSS Selectors
Selectors may be based on several criteria
- Element name:
h1, p, table, ul, etc.
- Element:
<h1>A top level heading</h1>
- Selector:
h1 {color:red; font-size:18px}
- Element ID: a unique name assigned to HTML/XHTML elements within the structure of the document
- Element:
<p id=”para01”>Some text goes here</p>
- Selector:
#para01 {color:blue; font-size:12px}
- Class ID: a name assigned to multiple elements which may be modified through reference to their class
- Element:
<p class=”instructions”>Here are some instructions</p>
- Another Element:
<p class=”instructions”>Here are some more instructions</p>
- Selector:
.instructions {color:red; font-size:12px; text-decoration:blink}
- Selectors may be combined in a variety of ways
Web Site Components - Behavior
The most interoperable language for adding dynamic behavior to web sites is Javascript - supported by most browsers on most operating systems
- A full-fledged programming language
- A non-trivial undertaking to become proficient in
- Experience in other programming languages can contribute to learning Javascript
- Defines actions that may be taken on/by DOM elements
- Allows for modification of existing DOM elements, creation of new DOM elements after the page has finished loading from the server, retrieval of new content after page loads
- An interactive web page that may behave like a local desktop application
Reference Links
- w3schools.com
- World Wide Web Consortium (W3C)
- Webmonkey.com
Simple Web Page
1
2
3
4
5
6
7
8
9
10
11
| <html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>This is a simple web page</title>
</head>
<body>
<h1>They don't get any simpler than this!</h1>
<p>OK, not much simpler than this.</p>
<p>Hello World?</p>
</body>
</html>
|
link to example
Simple Web Page with CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>This is a simple web page - with styling</title>
<style type="text/css">
h1 {color:blue; font-size:large}
p.para {color:#777777; font-size:small}
#annoying {color:red; text-decoration:line-through}
</style>
</head>
<body>
<h1>They don't get any simpler than this!</h1>
<p class="para">OK, not much simpler than this.</p>
<p id="annoying" class="para">Hello World?</p>
</body>
</html>
|
link to example
Simple Web Page with Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>This is a simple web page with Javascript</title>
<script type="text/javascript">
function genericAlert() {
alert("You just did something ...")
document.getElementById("clickMe").style.color = "red"
}
</script>
</head>
<body>
<h1>They don't get any simpler than this!</h1>
<p>OK, not much simpler than this.</p>
<p>Hello World?</p>
<p id="clickMe" onclick="genericAlert();">What happens when you click me?</p>
</body>
</html>
|
link to example
More Complete Web Page Example
Outline
What is an API
- The Google Maps API
- Version
- Reference Information
- Key Components
- Examples
What is an API
- API Stands for Application Programming Interface
An Application Programming Interface (API) is a particular set of rules and specifications that a software program can follow to access and make use of the services and resources provided by another particular software program that implements that API. It serves as an interface between different software programs and facilitates their interaction, similar to the way the user interface facilitates interaction between humans and computers. -- From Wikipedia: http://en.wikipedia.org/wiki/Api
- The Google Maps API provides an interface for interacting with Google’s mapping services from external web applications
Google Maps API Version
- The version of the Google Maps API used in this class is v3 of the Javascript API
- Key capabilities in v3
- Interactive maps based on Google’s mapping engine (contrast w. static maps API)
- Optimized for desktop and mobile platforms and applications
- Google Maps API Family
- http://code.google.com/apis/maps/
- Javascript API Home Page
- https://developers.google.com/maps/documentation/javascript/?csw=1
- Javascript API v3 Tutorial Page
- http://code.google.com/apis/maps/documentation/javascript/tutorial.html
Key Components
- Types (required)
- ROADMAP
- SATELLITE
- HYBRID
- TERRAIN
- Latitude and Longitude (required)
- specification of where the map should initially be centered
- Zoom Level (required)
- 0=global, higher values increasingly local. Limited by map type
Controls
- Available Controls (enabled through map options) default controls
- Zoom Control
- Scale Control
- MapType Control
- Street View Control
- Rotate (for maps that contain 45-degree imagery)
- Fullscreen Control
- Different control styles may be defined
- Controls may be positioned positioning options
- Custom controls may be defined and attached to fixed location in the map
Overlays
Overlay Types documentation
- Marker
- points depicted by specified or defined icons at locations within the map (reference)
- Polyline
- linear features defined by multiple points with a defined style for the line (reference)
- Polygon
- closed features defined by multiple points. Supports multi-polygons, and donuts. Line and fill styles may be specified. (reference)
- (Ground) Overlay Maps
- Image-based map layers that replace or overlay Google layers - registered to the map coordinates (reference)
- Info Windows
- floating content windows for displaying content defined as HTML, a DOM element, or text string (reference)
- Layers
- Grouped display content assigned to a specific layer type: Data (including GeoJSON), KmlLayer (& GeoRSS), Heatmap, FusionTablesLayer, TrafficLayer, TransitLayer, BicyclingLayer (reference)
- Custom Overlays
- definition of programmatically controlled layers (reference)
Services
- Geocoding Service
- Forward and reverse geocoding:
- address to LatLon
- LatLon to Nearest Address
- May be biased to current viewport, region
- Directions
- Based upon an origin, destination, and a variety of additional options
- Available directions and rendered route
- Distance Matrix
- Travel distance and duration given a specific mode of travel
- Elevation
- Delivery of elevation data for locations or paths
- Streetview
- Integration of Google Streetview within a DOM element
- Maximum Zoom
- Provides information about the maximum available zoom level
Events
- Events provide the ability to attach custom behaviors to events in the interface. For example:
- Changing items in the interface as the user zooms in on a map
- Displaying additional information outside the map when the user clicks a location in the map
- Synchronizing the behavior of multiple maps as the user interacts with one map
- Requires higher-level Javascript than we will cover in this course
Examples
Simple - Roadmap
Simple - Roadmap Code
gmaps01.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/mapPage.css">
</head>
<body>
<h1>Sample Map</h1>
<div id="map_canvas"></div>
<!-- Let's put our JavaScript down here --------------------------------------------->
<!-- Load the external JavaScript file with the map definition code -->
<script src="js/mapPage_01.js"></script>
<!-- Load the API in asynchronous mode and execute the initialize
function when done -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initialize&key=<mykey>">
</script>
</body>
</html>
|
mapPage.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| /* You must set the height of either the 'html' or 'body' elements for some
browsers to properly render the map with a hight taller than 0px */
html {
height: 100% }
body {
height: 100%;
margin: 0px;
padding: 0px;
background-color: black;
color: #CCCCCC;
text-align: center}
#map_canvas {
width:90%;
height:80%;
margin-left:auto;
margin-right: auto }
.infoBox {
color:black }
|
mapPage_01.js
1
2
3
4
5
6
7
8
9
10
11
12
| function initialize() {
var classroom = new google.maps.LatLng(35.084280,-106.624073)
var mapOptions = {
zoom: 8,
center: classroom,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map_canvas"),
mapOptions);
}
|
Simple - Satellite
Simple - Satellite Code
gmaps02.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/mapPage.css">
</head>
<body>
<h1>Sample Map</h1>
<div id="map_canvas"></div>
<!-- Let's put our JavaScript down here --------------------------------------------->
<!-- Load the external JavaScript file with the map definition code -->
<script src="js/mapPage_02.js"></script>
<!-- Load the API in asynchronous mode and execute the initialize
function when done -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initialize&key=<mykey>">
</script>
</body>
</html>
|
mapPage_02.js
1
2
3
4
5
6
7
8
9
10
11
12
| function initialize() {
var classroom = new google.maps.LatLng(35.084280,-106.624073)
var mapOptions = {
zoom: 8,
center: classroom,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(
document.getElementById("map_canvas"),
mapOptions);
}
|
Simple - Hybrid
Simple - Hybrid Code
gmaps03.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/mapPage.css">
</head>
<body>
<h1>Sample Map</h1>
<div id="map_canvas"></div>
<!-- Let's put our JavaScript down here --------------------------------------------->
<!-- Load the external JavaScript file with the map definition code -->
<script src="js/mapPage_03.js"></script>
<!-- Load the API in asynchronous mode and execute the initialize
function when done -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initialize&key=<mykey>">
</script>
</body>
</html>
|
mapPage_03.js
1
2
3
4
5
6
7
8
9
10
11
12
| function initialize() {
var classroom = new google.maps.LatLng(35.084280,-106.624073)
var mapOptions = {
zoom: 8,
center: classroom,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(
document.getElementById("map_canvas"),
mapOptions);
}
|
Simple - Terrain
Simple - Terrain Code
gmaps04.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/mapPage.css">
</head>
<body>
<h1>Sample Map</h1>
<div id="map_canvas"></div>
<!-- Let's put our JavaScript down here --------------------------------------------->
<!-- Load the external JavaScript file with the map definition code -->
<script src="js/mapPage_04.js"></script>
<!-- Load the API in asynchronous mode and execute the initialize
function when done -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initialize&key=<mykey>">
</script>
</body>
</html>
|
mapPage_04.js
1
2
3
4
5
6
7
8
9
10
11
12
| function initialize() {
var classroom = new google.maps.LatLng(35.084280,-106.624073)
var mapOptions = {
zoom: 8,
center: classroom,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(
document.getElementById("map_canvas"),
mapOptions);
}
|
Simple - Hybrid - Zoomed
Simple - Hybrid - Zoomed Code
gmaps05.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/mapPage.css">
</head>
<body>
<h1>Sample Map</h1>
<div id="map_canvas"></div>
<!-- Let's put our JavaScript down here --------------------------------------------->
<!-- Load the external JavaScript file with the map definition code -->
<script src="js/mapPage_05.js"></script>
<!-- Load the API in asynchronous mode and execute the initialize
function when done -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initialize&key=<mykey>">
</script>
</body>
</html>
|
mapPage_05.js
1
2
3
4
5
6
7
8
9
10
11
12
| function initialize() {
var classroom = new google.maps.LatLng(35.084280,-106.624073)
var mapOptions = {
zoom: 18,
center: classroom,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(
document.getElementById("map_canvas"),
mapOptions);
}
|
Simple - Zoomed - Modified Controls
Simple - Zoomed - Modified Controls Code
gmaps06.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/mapPage.css">
</head>
<body>
<h1>Sample Map</h1>
<div id="map_canvas"></div>
<!-- Let's put our JavaScript down here --------------------------------------------->
<!-- Load the external JavaScript file with the map definition code -->
<script src="js/mapPage_06.js"></script>
<!-- Load the API in asynchronous mode and execute the initialize
function when done -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initialize&key=<mykey>">
</script>
</body>
</html>
|
mapPage_06.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| function initialize() {
var classroom = new google.maps.LatLng(35.084280,-106.624073)
var myOptions = {
zoom: 18,
center: classroom,
mapTypeId: google.maps.MapTypeId.HYBRID,
zoomControl: true,
zoomControlOptions: {style: google.maps.ZoomControlStyle.SMALL},
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
streetViewControl: false
};
var map = new google.maps.Map(
document.getElementById("map_canvas"),
myOptions);
}
|
Markers
Markers Code
gmaps07.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/mapPage.css">
</head>
<body>
<h1>Sample Map</h1>
<div id="map_canvas"></div>
<!-- Let's put our JavaScript down here --------------------------------------------->
<!-- Load the external JavaScript file with the map definition code -->
<script src="js/mapPage_07.js"></script>
<!-- Load the API in asynchronous mode and execute the initialize
function when done -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initialize&key=<mykey>">
</script>
</body>
</html>
|
mapPage_07.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| function initialize() {
var classroom = new google.maps.LatLng(35.084280,-106.624073)
var office = new google.maps.LatLng(35.084506,-106.624899)
var myOptions = {
zoom: 18,
center: classroom,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(
document.getElementById("map_canvas"),
myOptions);
var classroomMarker = new google.maps.Marker({
position: classroom,
title:"Geography 485L/585L Classroom, Bandelier East, Room 106"
});
classroomMarker.setMap(map);
var officeMarker = new google.maps.Marker({
position: office,
title:"Office, Bandelier West, Room 107"
});
officeMarker.setMap(map);
}
|
Polyline
Polyline Code
gmaps08.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/mapPage.css">
</head>
<body>
<h1>Sample Map</h1>
<div id="map_canvas"></div>
<!-- Let's put our JavaScript down here --------------------------------------------->
<!-- Load the external JavaScript file with the map definition code -->
<script src="js/mapPage_08.js"></script>
<!-- Load the API in asynchronous mode and execute the initialize
function when done -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initialize&key=<mykey>">
</script>
</body>
</html>
|
mapPage_08.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
| var classroom = new google.maps.LatLng(35.084280,-106.624073)
var office = new google.maps.LatLng(35.084506,-106.624899)
var myOptions = {
zoom: 18,
center: classroom,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(
document.getElementById("map_canvas"),
myOptions);
var classroomMarker = new google.maps.Marker({
position: classroom,
title:"Geography 485L/585L Classroom, Bandelier East, Room 106"
});
classroomMarker.setMap(map);
var officeMarker = new google.maps.Marker({
position: office,
title:"Office, Bandelier West, Room 107"
});
officeMarker.setMap(map);
var officeVisitCoordinates = [
office,
new google.maps.LatLng(35.084445,-106.624327),
new google.maps.LatLng(35.084309,-106.624308),
classroom
];
var officePath = new google.maps.Polyline({
path: officeVisitCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
officePath.setMap(map)
}
|
Polygon
Polygon Code
gmaps09.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/mapPage.css">
</head>
<body>
<h1>Sample Map</h1>
<div id="map_canvas"></div>
<!-- Let's put our JavaScript down here --------------------------------------------->
<!-- Load the external JavaScript file with the map definition code -->
<script src="js/mapPage_09.js"></script>
<!-- Load the API in asynchronous mode and execute the initialize
function when done -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initialize&key=<mykey>">
</script>
</body>
</html>
|
mapPage_09.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
| function initialize() {
var classroom = new google.maps.LatLng(35.084280,-106.624073)
var office = new google.maps.LatLng(35.084506,-106.624899)
var myOptions = {
zoom: 18,
center: classroom,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(
document.getElementById("map_canvas"),
myOptions);
var classroomMarker = new google.maps.Marker({
position: classroom,
title:"Geography 485L/585L Classroom, Bandelier East, Room 106"
});
classroomMarker.setMap(map);
var officeMarker = new google.maps.Marker({
position: office,
title:"Office, Bandelier West, Room 107"
});
officeMarker.setMap(map);
var buildingCoordinates = [
new google.maps.LatLng(35.084498,-106.624921),
new google.maps.LatLng(35.084558,-106.624911),
new google.maps.LatLng(35.084566,-106.624970),
new google.maps.LatLng(35.084609,-106.624966),
new google.maps.LatLng(35.084544,-106.624383),
new google.maps.LatLng(35.084438,-106.624317),
new google.maps.LatLng(35.084384,-106.623922),
new google.maps.LatLng(35.084164,-106.623970),
new google.maps.LatLng(35.084214,-106.624324),
new google.maps.LatLng(35.084214,-106.624324),
new google.maps.LatLng(35.084391,-106.624284)
];
var bldgPoly = new google.maps.Polygon({
paths: buildingCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35
});
bldgPoly.setMap(map)
}
|
Adding an Info Window
Adding an Info Window Code
gmaps10.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/mapPage.css">
</head>
<body>
<h1>Sample Map</h1>
<div id="map_canvas"></div>
<!-- Let's put our JavaScript down here --------------------------------------------->
<!-- Load the external JavaScript file with the map definition code -->
<script src="js/mapPage_10.js"></script>
<!-- Load the API in asynchronous mode and execute the initialize
function when done -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initialize&key=<mykey>">
</script>
</body>
</html>
|
mapPage_10.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
| function initialize() {
var classroom = new google.maps.LatLng(35.084280,-106.624073)
var office = new google.maps.LatLng(35.084506,-106.624899)
var myOptions = {
zoom: 18,
center: classroom,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(
document.getElementById("map_canvas"),
myOptions);
var classroomMarker = new google.maps.Marker({
position: classroom,
title:"Geography 485L/585L Classroom, Bandelier East, Room 106"
});
classroomMarker.setMap(map);
var officeMarker = new google.maps.Marker({
position: office,
title:"Office, Bandelier West, Room 107"
});
officeMarker.setMap(map);
var buildingCoordinates = [
new google.maps.LatLng(35.084498,-106.624921),
new google.maps.LatLng(35.084558,-106.624911),
new google.maps.LatLng(35.084566,-106.624970),
new google.maps.LatLng(35.084609,-106.624966),
new google.maps.LatLng(35.084544,-106.624383),
new google.maps.LatLng(35.084438,-106.624317),
new google.maps.LatLng(35.084384,-106.623922),
new google.maps.LatLng(35.084164,-106.623970),
new google.maps.LatLng(35.084214,-106.624324),
new google.maps.LatLng(35.084214,-106.624324),
new google.maps.LatLng(35.084391,-106.624284)
];
var bldgPoly = new google.maps.Polygon({
paths: buildingCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35
});
bldgPoly.setMap(map);
var classInfoContent = '<div class="infoBox">' +
'<p>This is the location for the Geography 485L/585L class</p>' +
'</div>'
var classInfoWindow = new google.maps.InfoWindow({
content: classInfoContent
});
google.maps.event.addListener(classroomMarker, 'click', function() {
classInfoWindow.open(map,classroomMarker);
});
var bldgInfoContent = '<div class="infoBox">' +
'<p>This is the location of Bandelier East and West on the UNM Campus</p>' +
'<iframe src="https://www.google.com/maps/embed?pb=!1m0!3m2!1sen!2sus!4v1486322485343!6m8!1m7!1sneDc4DwioOJ-TytixzvJEg!2m2!1d35.08459518161192!2d-106.6243050674837!3f207.5327084691508!4f-4.850942482843806!5f0.7820865974627469" width="300" height="225" frameborder="0" style="border:0" allowfullscreen></iframe>' +
'</div>'
var bldgInfoWindow = new google.maps.InfoWindow({
content: bldgInfoContent
});
google.maps.event.addListener(bldgPoly, 'click', function() {
var position = new google.maps.LatLng(35.084438,-106.624317)
bldgInfoWindow.setPosition(position)
bldgInfoWindow.open(map);
});
}
|
Overview
- Additional Google Maps API Capabilities to be Aware of
- Styling of the base maps with custom preferences
- Fusion Tables
- Bringing it all together in a "real" web page
Getting Started with Styled Maps - Video
Styled Maps Documentation | Create Map Style wizard
Map Example: Simple - Styled
gmap_styled.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/mapPage.css">
</head>
<body>
<h1>Sample Map - Styled (POIs Highlighted)</h1>
<div id="map_canvas"></div>
<!-- Let's put our JavaScript down here --------------------------------------------->
<!-- Load the external JavaScript file with the map definition code -->
<script src="js/mapPage_styled.js"></script>
<!-- Load the API in asynchronous mode and execute the initialize function when done -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initialize&key=<YourKey>">
</script>
</body>
</html>
|
mapPage_styled.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
| function initialize() {
var classroom = new google.maps.LatLng(35.084280,-106.624073)
var myOptions = {
zoom: 8,
center: classroom,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [
{
featureType: "water",
stylers: [
{ visibility: "on" },
{ hue: "#0008ff" }
]
},{
featureType: "road.highway",
stylers: [
{ hue: "#ff1a00" }
]
},{
featureType: "road.arterial",
stylers: [
{ hue: "#ffa200" },
{ visibility: "simplified" }
]
},{
featureType: "road.local",
stylers: [
{ visibility: "off" }
]
},{
featureType: "administrative",
stylers: [
{ visibility: "simplified" }
]
},{
featureType: "poi",
stylers: [
{ visibility: "on" },
{ hue: "#00ffff" }
]
},{
featureType: "poi",
stylers: [
{ visibility: "on" }
]
}
]
};
var map = new google.maps.Map(
document.getElementById("map_canvas"),
myOptions);
}
|
Google Fusion Tables
Fusion Tables Introduction
Sample Fusion Table from the previous NAWRS Mapper example: https://www.google.com/fusiontables/DataSource?docid=1v2IlIFJqat2tTSBA8e4guqlzMGRe8iW4yXP25Kg
NAWRS Mapper Javascript File: https://github.com/nawrs/nawrs-web/blob/master/js/core.js
Bringing It All Together - link
###
gmaps_events.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
| <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/event_mapPage.css">
<title>Karl's Event Diary</title>
</head>
<body>
<h1>My diary of endurance events that I've participated in since joining
Team in Training
</h1>
<p>In 2008 Cynthia and I joined the Leukemia and Lymphoma Society's
(<a href="http://www.lls.org/">LLS</a>) Team in Training
(<a href="http://www.teamintraining.org/">TNT</a>,
<a href="http://youtu.be/GMSKG8L6K78">info video</a>) program as
participants to train for the Animas Valley/Steamworks Half Marathon and
raise money for blood cancer research and patient services. In spite of
our not having any direct connection to blood cancer (at that time),
we found the goals of LLS admirable, the combined training and
fund-raising program of TNT a great idea, and made many new friends
over the many seasons that we have been involved with TNT.</p>
<p>From 2008 through early 2015 we continued to volunteer with TNT, as
participants, mentors, and since 2010 I was a coach (check out my
<a href="http://youtu.be/GMSKG8L6K78">half-second</a> of fame in the
info video at 2:13) for TNT with an emphasis on training walkers for
full- or half-marathons. This page provides a summary of the events that
I've participated in in some capacity since 2008. </p>
<!-- based on the example provided by Google -
https://developers.google.com/maps/documentation/javascript/examples/
style-selector -->
<div id="style-selector-control" class="map-control">
<select id="style-selector" class="selector-control">
<option value="default">Default</option>
<option value="silver">Silver</option>
<option value="night">Night mode</option>
<option value="retro" selected="selected">Retro</option>
<option value="hiding">Hide features</option>
</select>
</div>
<div id="event-map" name="event-map"></div>
<table>
<thead>
<th>Date</th>
<th>Event Name</th>
<th>Event Time</th>
<th>Location on Map</th>
</thead>
<tbody>
<tr>
<td>1/8/2017</td>
<td>Disney World Marathon</td>
<td>7:14</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[4].point,
10)">approx. map</a></td>
</tr>
<tr>
<td>10/16/2016</td>
<td>Duke City Half Marathon </td>
<td>~2:55</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[0].point,
11)">map</a></td>
</tr>
<tr>
<td>11/13/2015</td>
<td>Avengers Half Marathon </td>
<td>3:17:55</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[5].point,
12)">approx. map</a></td>
</tr>
<tr>
<td>1/11/2015</td>
<td>Disney World Marathon (Goofy - Day 2)</td>
<td>6:21:01</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[4].point,
10)">approx. map</a></td>
</tr>
<tr>
<td>1/10/2015</td>
<td>Disney World Half Marathon (Goofy - Day 1)</td>
<td>2:45:55</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[4].point,
10)">approx. map</a></td>
</tr>
<tr>
<td>10/19/2014</td>
<td>Duke City Half Marathon</td>
<td>2:45:17</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[0].point,
11)">map</a></td>
</tr>
<tr>
<td>2/23/2014</td>
<td>Princess Half Marathon</td>
<td>3:07:11</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[4].point,
10)">approx. map</a></td>
</tr>
<tr>
<td>2/22/2014</td>
<td>Princess Enchanted 10k</td>
<td>1:42:43</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[4].point,
10)">approx. map</a></td>
</tr>
<tr>
<td>9/1/2013</td>
<td>Disneyland Half Marathon</td>
<td>2:56:57</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[5].point,
12)">approx. map</a></td>
</tr>
<tr>
<td>1/13/2013</td>
<td>Disney World Marathon (Goofy - Day 2)</td>
<td>6:46:57</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[4].point,
10)">approx. map</a></td>
</tr>
<tr>
<td>1/12/2013</td>
<td>Disney World Half Marathon (Goofy - Day 1)</td>
<td>3:22:48</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[4].point,
10)">approx. map</a></td>
</tr>
<tr>
<td>9/29/2012</td>
<td>Hot Chocolate 15k </td>
<td>1:56:46</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[6].point,
10)">map</a></td>
</tr>
<tr>
<td>6/9/2012</td>
<td>Animas Valley/Steamworks Half Marathon</td>
<td>no time: coached</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[1].point,
10)">map</a></td>
</tr>
<tr>
<td>1/9/2012</td>
<td>Disney World Marathon (Goofy - Day 2)</td>
<td>6:56:28</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[4].point,
10)">map</a></td>
</tr>
<tr>
<td>1/8/2011</td>
<td>Disney World Half Marathon (Goofy - Day 1)</td>
<td>3:29:00</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[4].point,
10)">map</a></td>
</tr>
<tr>
<td>6/19/2010</td>
<td>Animas Valley/Steamworks Half Marathon</td>
<td>no time: coached</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[1].point,
10)">map</a></td>
</tr>
<tr>
<td>6/6/2010</td>
<td>San Diego Rock 'n' Roll Marathon</td>
<td>no time: coached</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[2].point,
11)">map</a></td>
</tr>
<tr>
<td>10/18/09</td>
<td>Nike Women's Marathon</td>
<td>7:13:05</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[3].point,
12)">map</a></td>
</tr>
<tr>
<td>9/6/2009</td>
<td>Disneyland Half Marathon</td>
<td>3:43:05</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[5].point,
12)">map</a></td>
</tr>
<tr>
<td>1/11/2009</td>
<td>Disney World Marathon</td>
<td>6:57:42</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[4].point,
10)">map</a></td>
</tr>
<tr>
<td>10/19/2008</td>
<td>Duke City Half Marathon</td>
<td>3:09:42</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[0].point,
11)">map</a></td>
</tr>
<tr>
<td>6/21/2008</td>
<td>Animas Valley/Steamworks Half Marathon</td>
<td>3:14:52</td>
<td><a href="#event-map" onclick="recenter(map, eventPlaces[1].point,
10)">map</a></td>
</tr>
</tbody>
</table>
</body>
<!-- Let's put our JavaScript down here --------------------------------------------->
<!-- Load the external JavaScript file with the map definition code -->
<script src="js/mapPage_events.js"></script>
<!-- Load the API in asynchronous mode and execute the initialize
function when done -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initialize&
key=<YourKey>">
</script>
</body>
</html>
|
gmaps_events.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
| var map;
var eventPlaces;
function initialize() {
// Define a set of global coordinates for use throughout the web site
// Place coordinates derived from GNIS database: http://geonames.usgs.gov/
// pls/gnispublic
// from https://tools.wmflabs.org/geohack/geohack.php?
// pagename=Geographic_center_of_the_contiguous_United_States&
// params=39.828175_N_98.579500_W_region:US_type:landmark
geoCenter = new google.maps.LatLng(39.828175,-98.5795)
eventPlaces = [
{
name: "Albuquerque",
point: new google.maps.LatLng(35.0889356,-106.5747462),
label: "Albuquerque: Duke City Half Marathon"
},
{
name: "Durango",
point: new google.maps.LatLng(37.2752800,-107.8800667),
label: "Durango: Animas Valley/Steamworks Half Marathon"
},
{
name: "San Diego",
point: new google.maps.LatLng(32.7153292,-117.1572551),
label: "San Diego: San Diego Rock 'n' Roll Marathon"
},
{
name: "San Francisco",
point: new google.maps.LatLng(37.7749295,-122.4194155),
label: "San Francisco: Nike Women's Marathon"
},
{
name: "Orlando",
point: new google.maps.LatLng(28.5383355,-81.3792365),
label: "Orlando: Walt Disney World half- and full-marathon"
},
{
name: "Anaheim",
point: new google.maps.LatLng(33.8352932,-117.9145036),
label: "Anaheim: Disneyland Half Marathon"
},
{
name: "Albuquerque",
point: new google.maps.LatLng(35.0889356,-106.5747462),
label: "Hot Chocolate 15k"
}
];
var myOptions = {
zoom: 4,
center: geoCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false};
map = new google.maps.Map(
document.getElementById("event-map"),
myOptions);
addMarkers(map,eventPlaces)
// Add a style-selector control to the map.
var styleControl = document.getElementById('style-selector-control');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(styleControl);
// Set the map's style to the initial value of the selector.
var styleSelector = document.getElementById('style-selector');
map.setOptions({styles: styles[styleSelector.value]});
// Apply new JSON when the user selects a different style.
styleSelector.addEventListener('change', function() {
map.setOptions({styles: styles[styleSelector.value]});
});
}
function recenter(mapName, latlon, zoomLevel) {
mapName.setCenter(latlon);
mapName.setZoom(zoomLevel)
}
function addMarkers(mapName, markerArray) {
for (index = 0; index < markerArray.length; index++) {
myMarker = new google.maps.Marker({
position: markerArray[index].point,
title: markerArray[index].label
});
myMarker.setMap(mapName)
}
}
// styles generated by https://mapstyle.withgoogle.com
var styles = {
default: null,
silver: [
{
elementType: 'geometry',
stylers: [{color: '#f5f5f5'}]
},
{
elementType: 'labels.icon',
stylers: [{visibility: 'off'}]
},
{
elementType: 'labels.text.fill',
stylers: [{color: '#616161'}]
},
{
elementType: 'labels.text.stroke',
stylers: [{color: '#f5f5f5'}]
},
{
featureType: 'administrative.land_parcel',
elementType: 'labels.text.fill',
stylers: [{color: '#bdbdbd'}]
},
{
featureType: 'poi',
elementType: 'geometry',
stylers: [{color: '#eeeeee'}]
},
{
featureType: 'poi',
elementType: 'labels.text.fill',
stylers: [{color: '#757575'}]
},
{
featureType: 'poi.park',
elementType: 'geometry',
stylers: [{color: '#e5e5e5'}]
},
{
featureType: 'poi.park',
elementType: 'labels.text.fill',
stylers: [{color: '#9e9e9e'}]
},
{
featureType: 'road',
elementType: 'geometry',
stylers: [{color: '#ffffff'}]
},
{
featureType: 'road.arterial',
elementType: 'labels.text.fill',
stylers: [{color: '#757575'}]
},
{
featureType: 'road.highway',
elementType: 'geometry',
stylers: [{color: '#dadada'}]
},
{
featureType: 'road.highway',
elementType: 'labels.text.fill',
stylers: [{color: '#616161'}]
},
{
featureType: 'road.local',
elementType: 'labels.text.fill',
stylers: [{color: '#9e9e9e'}]
},
{
featureType: 'transit.line',
elementType: 'geometry',
stylers: [{color: '#e5e5e5'}]
},
{
featureType: 'transit.station',
elementType: 'geometry',
stylers: [{color: '#eeeeee'}]
},
{
featureType: 'water',
elementType: 'geometry',
stylers: [{color: '#c9c9c9'}]
},
{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [{color: '#9e9e9e'}]
}
],
night: [
{elementType: 'geometry', stylers: [{color: '#242f3e'}]},
{elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
{elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
{
featureType: 'administrative.locality',
elementType: 'labels.text.fill',
stylers: [{color: '#d59563'}]
},
{
featureType: 'poi',
elementType: 'labels.text.fill',
stylers: [{color: '#d59563'}]
},
{
featureType: 'poi.park',
elementType: 'geometry',
stylers: [{color: '#263c3f'}]
},
{
featureType: 'poi.park',
elementType: 'labels.text.fill',
stylers: [{color: '#6b9a76'}]
},
{
featureType: 'road',
elementType: 'geometry',
stylers: [{color: '#38414e'}]
},
{
featureType: 'road',
elementType: 'geometry.stroke',
stylers: [{color: '#212a37'}]
},
{
featureType: 'road',
elementType: 'labels.text.fill',
stylers: [{color: '#9ca5b3'}]
},
{
featureType: 'road.highway',
elementType: 'geometry',
stylers: [{color: '#746855'}]
},
{
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [{color: '#1f2835'}]
},
{
featureType: 'road.highway',
elementType: 'labels.text.fill',
stylers: [{color: '#f3d19c'}]
},
{
featureType: 'transit',
elementType: 'geometry',
stylers: [{color: '#2f3948'}]
},
{
featureType: 'transit.station',
elementType: 'labels.text.fill',
stylers: [{color: '#d59563'}]
},
{
featureType: 'water',
elementType: 'geometry',
stylers: [{color: '#17263c'}]
},
{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [{color: '#515c6d'}]
},
{
featureType: 'water',
elementType: 'labels.text.stroke',
stylers: [{color: '#17263c'}]
}
],
retro: [
{elementType: 'geometry', stylers: [{color: '#ebe3cd'}]},
{elementType: 'labels.text.fill', stylers: [{color: '#523735'}]},
{elementType: 'labels.text.stroke', stylers: [{color: '#f5f1e6'}]},
{
featureType: 'administrative',
elementType: 'geometry.stroke',
stylers: [{color: '#c9b2a6'}]
},
{
featureType: 'administrative.land_parcel',
elementType: 'geometry.stroke',
stylers: [{color: '#dcd2be'}]
},
{
featureType: 'administrative.land_parcel',
elementType: 'labels.text.fill',
stylers: [{color: '#ae9e90'}]
},
{
featureType: 'landscape.natural',
elementType: 'geometry',
stylers: [{color: '#dfd2ae'}]
},
{
featureType: 'poi',
elementType: 'geometry',
stylers: [{color: '#dfd2ae'}]
},
{
featureType: 'poi',
elementType: 'labels.text.fill',
stylers: [{color: '#93817c'}]
},
{
featureType: 'poi.park',
elementType: 'geometry.fill',
stylers: [{color: '#a5b076'}]
},
{
featureType: 'poi.park',
elementType: 'labels.text.fill',
stylers: [{color: '#447530'}]
},
{
featureType: 'road',
elementType: 'geometry',
stylers: [{color: '#f5f1e6'}]
},
{
featureType: 'road.arterial',
elementType: 'geometry',
stylers: [{color: '#fdfcf8'}]
},
{
featureType: 'road.highway',
elementType: 'geometry',
stylers: [{color: '#f8c967'}]
},
{
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [{color: '#e9bc62'}]
},
{
featureType: 'road.highway.controlled_access',
elementType: 'geometry',
stylers: [{color: '#e98d58'}]
},
{
featureType: 'road.highway.controlled_access',
elementType: 'geometry.stroke',
stylers: [{color: '#db8555'}]
},
{
featureType: 'road.local',
elementType: 'labels.text.fill',
stylers: [{color: '#806b63'}]
},
{
featureType: 'transit.line',
elementType: 'geometry',
stylers: [{color: '#dfd2ae'}]
},
{
featureType: 'transit.line',
elementType: 'labels.text.fill',
stylers: [{color: '#8f7d77'}]
},
{
featureType: 'transit.line',
elementType: 'labels.text.stroke',
stylers: [{color: '#ebe3cd'}]
},
{
featureType: 'transit.station',
elementType: 'geometry',
stylers: [{color: '#dfd2ae'}]
},
{
featureType: 'water',
elementType: 'geometry.fill',
stylers: [{color: '#b9d3c2'}]
},
{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [{color: '#92998d'}]
}
],
hiding: [
{
featureType: 'poi.business',
stylers: [{visibility: 'off'}]
},
{
featureType: 'transit',
elementType: 'labels.icon',
stylers: [{visibility: 'off'}]
}
]
};
|
Overview
- Geographic Information Systems
- Data Types
- Coordinate Systems
- Services Oriented Architectures
- Historic Context
- Current Model - Network Computing
- Components
- Interoperability Standards
Data Types - Vector
- Vector data represent phenomena that are associated with specific bounded locations, typically represented by:
- Vector data include:
- The geometries that describe the area being referenced, and
- Attributes associated with that area
For example, a census vector data product might include the geometries that define census tracts and attributes associated with each geometry: population, income, etc.
Data Types - Raster
Raster data are frequently used to represent values for phenomena that vary continuously across space (e.g. elevation, concentration of air pollutants, depth to ground water, etc. )
These values are encoded over a regular grid of observation locations with a specified grid spacing - often referred to as the spatial resolution of the dataset (i.e. 10m resolution for a standard USGS Digital Elevation Model product)
Often parts of data collections that are repeated (i.e. remote sensing data products)
Accessing and Processing Raster and Vector Data
- ArcGIS - ArcCatalog
- QGIS - Dataset properties available through the "Metadata" tab
- Through metadata files available from the provider web site or embedded in the downloaded file
Accessing and Processing Raster and Vector Data - Programmatically
- Two geospatial libraries and their related utility programs provide information about and tools for modifying vector and raster data sets
- OGR
- vector data access and information
- GDAL
- raster data access and information
These libraries are the data access and processing foundation for a growing number of open source and commercial mapping systems
Information and documentation: GDAL Home Page | OGR Home Page
Coordinate Systems/Projections
- To convert locations from a 3-dimensional oblate spherical coordinate system (such as is commonly used to represent the surface of the earth) to a 2-dimensional representation in a map, a coordinate transformation must be performed.
- There are a limitless number of potential coordinate transformations possible, and a large number have been named and defined that meet specific cartographic or other requirements
EPSG Codes
A catalog of numeric codes and associated coordinate transformation parameters is maintained by the International Association of Oil & Gas Producers (OGP) - the successor scientific organization to the European Petroleum Survey Group (EPSG)
These numeric codes are used by many desktop and online mapping systems to document and represent the coordinate systems of available data and services
Links to an online version of the registry and downloadable databases of the registry are available from: http://www.epsg.org/Geodetic.html.
Projection Parameters
The parameters that define a map projection may be looked up in a number of online locations:
- EPSG registry
- Helpful if you already know the EPSG code of the projection you are looking for - http://www.epsg-registry.org/
- GeoTIFF Projection List
- Helpful if you know the name of one of the broadly used projections - uneven performance of links - http://www.remotesensing.org/geotiff/proj_list/ [Archived Version]
- SpatialReference.org
- Decent search tool, includes non-EPSG as well as EPSG projection information, multiple descriptions of projection parameters - http://spatialreference.org/
Services Oriented Architectures
Where have we come from - ENIAC (1946)
- First general purpose electronic computer
- Programmable, but could not store programs
Where have we come from - Early Client-Server Computing (1960s)
- Mainframe computers to which client terminals connected over a local network
- Computing performed by server, client purely a display device
Where have we come from - Personal Computers (1970s)
- Desktop computers capable of running a variety of operating systems and applications
- In some environments can be interconnected to a central local server
Now - Network computing
Network Computing Timeline
- Predecessor to the Internet - ARPANET (1969). Interconnection between UCLA and SRI (Menlo Park)
- Adoption of TCP/IP as next generation protocol for ARPANET (1983)
- NSF commissions construction of NSFNET, also based upon TCP/IP (1983)
- NSFNET opened to commercial connections (1988). Led to interconnection of multiple, previously separate networks into an “Internet”
- Growth of internet users has expanded rapidly over the past decade
In a Phrase ...
The current networking computing model consists of Components Interacting with Each Other
So - We Need to Answer the Following Questions
What are components?
What does it mean to interact?
The Big Picture - Services Oriented Architectures
- Services Oriented Architecture (SOA) for Geospatial Data and Processing
- Data, Processing & Client Tiers
- Open Geospatial Consortium Interoperability Standards
- Geospatial Metadata Standards
- Internet Standards
- Web: HTML, CSS, JavaScript, XML
- SOAP - Simple Object Access Protocol
- REST - Representation State Transformation
The Pieces - Components
Key Components - Data
Database systems
- Optimized for storing massive quantities of tabular data
- May be spatially enabled to support the storage of geometries (points, lines, polygons) in addition to related attribute data
- Standard language (Structured Query Language [SQL]) for interacting with many databases
- Broad support for accessing the contents of databases from many other applications and programming languages, for example:
- Spreadsheets
- Statistical Software
- Geographic Information Systems (GIS)
Key Components - Data
File-based data
- Often stored on the file system
- Sometimes difficult represent data within a database structure (i.e. binary data)
- May be in a wide variety of formats
- XML
- ASCII Text (e.g. CSV, tab-delimited)
- Binary files
- Excel Spreadsheets
- Word Processing Documents
- Geospatial data (e.g. imagery)
- Remotely Accessible Data
- Some data may be provided through reference to an external network resource (i.e. a web address, or other identifier) or service
Key Components - Processing Services
Key Components - Clients
- Any system that accesses the services provided by the system may be considered a “client”
- That system may be manually operated by a human user, or triggered automatically by software
- Human operated clients include
- Web-based applications
- Desktop applications such as Geographic Information Systems and Statistical Analysis tools
- Machine clients include
- Data processing services that translate requests to them into requests for other system services
- Regularly scheduled requests that are automatically triggered by external computer systems.
The Glue - Interoperability Standards / Service Interfaces
Open Geospatial Consortium Interoperability Standards
Open Geospatial Consortium (OGC) Standards
- Two Classes of Standards Considered Here
- Geospatial Product Access Standards
- Geospatial Data and Representation Standards
- Product Access Standards
- Web Map Services (WMS)
- Web Feature Services (WFS)
- Web Coverage Services (WCS)
- Data and Representation Standards
- Geography Markup Language (GML)
- KML (formerly known as Keyhole Markup Language)
Comparison of OGC Service Models
OGC Web Map Services (WMS)
http://gstore.unm.edu/apps/rgis/datasets/
b030ab7b-86e3-4c30-91c0-f427303d5c77/
services/ogc/wms?
VERSION=1.1.1&&
SERVICE=WMS&
REQUEST=GetMap&
SRS=EPSG:4326&
FORMAT=image/jpeg&
STYLES=&
LAYERS=bernalillo_tm2011&
TRANSPARENT=TRUE&
WIDTH=521&
HEIGHT=200&
bbox=-107.207,34.8404,-106.143,35.2487
OGC Web Feature Services (WMS) Characteristics
- HTTP GET (required), HTTP POST (optional)
- Requests:
GetCapabilities
GetMap
GetFeatureInfo
- Returns
- Mapped data
- XML Capabilities Document, Feature Attributes
- Includes support for time-based requests
OGC Web Feature Services (WFS) Characteristics
- Either HTTP GET or POST required
- Requests
GetCapabilities
DescribeFeatureType
GetFeature/GetFeatureWithLock
GetGmlObject
LockFeature
Transaction
- Returns
- XML (GML)
- Capabilities
- Feature Data
OGC Web Coverage Services (WCS) Characteristics
- Either HTTP GET or POST required
- Requests
GetCapabilities
DescribeCoverage
GetCoverage
- Returns
- Geospatial data for coverage
- XML Capabilities
- Includes support for time-based requests
OGC Geography Markup Language (GML)
- GML is an XML grammar for representing geospatial features and their associated attributes
- In its generic form it can encode points, lines, and polygons and their associated attributes
- As an XML schema GML was designed to be extensible by communities of practice for consistent encoding of geographic data more richly than allowed by the generic default model
- GML documents representing large complex geometries can be quite large - therefore slow to transfer over the Internet
OGC KML
- An XML specification that supports the encoding of representation and embedding of geospatial data for use in geospatial viewers
- Began as the underlying representation language of Google Earth (originally developed by Keyhole for their virtual Earth viewer)
- Adopted as an OGC standard in 2008
- Supports data linkage through
- Embedding
- Reference through external URLs - with WMS specifically supported through parameterization
- Includes support for the representation of time in relation to data objects
Implementation of the OGC Standards
- WMS
- 1.3.0 - 389 implementations
- 1.1.1 - 558
- 1.1 - 263
- 1.0 - 301
- WFS
- 2.0 - 78
- 2.0 transactional - 17
- 1.1.0 - 310
- 1.1.0 transactional - 83
- 1.0.0 - 363
- 1.0.0 transactional - 131
- WCS
- 2.0 - Core - 7
- 1.1.2 - 27
- 1.1.1 Corregendum 1- 67
- 1.1.0 - 30
- 1.0.0 Corregendum - 227
- KML
- 2.2.0 - 117
- 2.2 Reference (Best Practice) - 11
- 2.1 Reference (Best Practice) - 82
- GML
- 3.3 - 6
- 3.2.1 - 157
- 3.1.1 - 161
- 3.0 - 156
- 2.1.2 - 179
- 2.1.1 - 127
- 2.0 - 82
- 1.0 - 20
Implementation information based upon OGC Implementation Statistics - Accessed 2/2017
OGC Summary
The OGC web service specifications support key geospatial data access requirements
- WMS
- visualization of geospatial data through simple web requests
- WFS
- delivery of geospatial data (typically points, lines, and polygons) in a format that is usable in GIS and other applications
- WCS
- delivery of geospatial data (typically, but not limited to, raster data) usable in other applications
OGC Summary
The OGC data and representation standards support data exchange and higher level representation
- GML
- XML schema for the representation of features and associated attributes. It may be extended for use by specific communities of users (i.e. ecological data models)
- KML
- XML schema that supports the combination of embedded data and external data into a complete representation model that may be used by client applications to present the data through a user interface (e.g. Google Earth, WorldWind)
Overview
- Extensible Markup Language - XML
- Definition of a markup language
- Requirements
- Extensible ???
- KML - AKA Keyhole Markup Language
- An XML Document Format
- Combined representation of spatial data and time
- OGC Web Map Services (WMS)
- Requests and Results
- GetCapabilities, GetMap, GetFeatureInfo
- Integration of WMS into KML
Extensible Markup Language - XML
XML Background
- Defined as a markup language profile of Standard Generalized Markup Language (SGML - ISO 8879:1986)
- XML 1.0 released as a W3C Recommendation in 1998
XML Design Goals
- XML shall be straightforwardly usable over the Internet.
- XML shall support a wide variety of applications.
- XML shall be compatible with SGML.
- It shall be easy to write programs which process XML documents.
- The number of optional features in XML is to be kept to the absolute minimum, ideally zero.
- XML documents should be human-legible and reasonably clear.
- The XML design should be prepared quickly.
- The design of XML shall be formal and concise.
- XML documents shall be easy to create.
- Terseness in XML markup is of minimal importance.
From XML 1.0 (5th ed.) Recommendation
- Well Formed XML - a document that conforms to the structural definition of XML. Either well-formed, or not XML
- Valid XML - a document that is both well-formed and conforms to a specific content structure defined by
- A Document Type Definition (DTD) - the original XML specification for the definition of the content of a specific XML document
- A Schema document - defined in a variety of languages (e.g. W3C Schema, RELAX NG, Schematron, ISO DSDL, etc.)
XML Wikipedia Article
Simple XML Document
1
2
3
4
5
6
7
8
| <?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Some comment would go here to describe this document ... -->
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body type="instruction" >Don't forget me this weekend!</body>
</note>
|
XML Source (modified from original): w3schools
XML Prolog
Includes XML Declaration and Comment
1
2
| <?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Some comment would go here to describe this document ... -->
|
XML Elements
Define blocks of content
3
4
5
6
7
8
| <note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body type="instruction" >Don't forget me this weekend!</body>
</note>
|
XML Root Element
- Required
- There is only one
- It must be a pair of opening and closing tags
3
4
5
6
7
8
| <note>
...
...
...
...
</note>
|
XML Content Elements
- Contain all other document content
- May be paired opening and closing tags, or
- May be self-closing with a terminal "/" in the element, e.g.
<br />
4
5
6
7
| <to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body type="instruction" >Don't forget me this weekend!</body>
|
XML Attributes
Define additional information about elements as name=value pairs.
7
| <body type="instruction" >Don't forget me this weekend!</body>
|
XML Element Content
The material contained between the opening and closing tags of an Element.
7
| <body type="instruction" >Don't forget me this weekend!</body>
|
Valid XML?
Why is this XML well-formed but not valid?
There is no DTD or Schema defined for the document against which it can be validated
1
2
3
4
5
6
7
8
| <?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Edited by XMLSpy® -->
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body type="instruction" >Don't forget me this weekend!</body>
</note>
|
Common XML Constructs
- Document Type Declaration (DTD) references (PROLOG)
- definition, either by reference or by direct inclusion, the allowed structure of an XML document, for example:
<!DOCTYPE greeting SYSTEM "hello.dtd">
- CDATA Sections
- blocks of XML that contain characters that would otherwise be recognized as XML markup, for example:
<![CDATA[<greeting>Hello, world!</greeting>]]>
- XML Namespace Declarations
- additional information included in elements to distinguish between duplicate element names, for example (declared in lines 1-3, used in lines 5-17):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <root
xmlns:h="http://www.w3.org/TR/html4/"
xmlns:f="http://www.w3schools.com/furniture">
<h:table>
<h:tr>
<h:td>Apples</h:td>
<h:td>Bananas</h:td>
</h:tr>
</h:table>
<f:table>
<f:legs>4</f:legs>
<f:cost>300</f:cost>
<f:width>3</f:width>
<f:length>5</f:length>
<f:height>4</f:height>
</f:table>
</root>
|
KML
KML Background
- An XML grammar originally developed as Keyhole Markup Language by Keyhole, Inc. for use in their Keyhole Earth Viewer.
- Google acquired Keyhole, Inc. in 2004
- KML version 2.2 became an OGC standard in 2008
- Two delivered KML file formats
- KML
- an XML document, with a “.kml” extension that is directly readable and editable
- KMZ
- a compressed (zipped) file with a “.kmz” extension, that contains at least a KML document, but may contain other files as well.
KML Capabilities
- Annotate the Earth
- Specify icons and labels to identify locations on the surface of the planet
- Create different camera positions to define unique views for KML features
- Define image overlays to attach to the ground or screen
- Define styles to specify KML feature appearance
- Write HTML descriptions of KML features, including hyperlinks and embedded images
- Organize KML features into hierarchies using
folder elements
- Locate and update retrieved KML documents from local or remote network locations
- Define the location and orientation of textured 3D objects
KML Content
- Model for encoding 2- and 3-dimensional geometries for use in 2-D mappers and 3-D virtual globe applications
- Uses latitude-longitude (based upon WGS84 datum) for encoding horizontal position
- Represents altitude in Meters (based upon the WGS84 ellipsoid and EGM96 geoid)
2D and 3D KML Sample
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<Placemark>
<Polygon>
<altitudeMode>
clampToGround
</altitudeMode>
<outerBoundaryIs>
<LinearRing>
<coordinates>
-135,78.5,300000
-135,12.5,300000
-45,12.5,300000
-45,78.5,300000
-135,78.5,300000
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
</Document>
</kml>
|
KML Example
Example from: KML 2.2 Specification (fig. 6, pg. 21)
High-Level KML Content Types
- Features
- including documents, folders, placemarks, network links
- Geometries
- including points, linestrings, polygons, models, locations
- Overlays
- including ground overlays, lat-lon boxes, photo overlays, screen overlays
- Styles
- styles, substyles, icons, label styles
- Links
- read, update, create, delete, change
- Views
- camera, look at
- Time
- time span, timestamp
KML Demonstration and References
New Mexico State Boundary KML File | KMZ File (from NM RGIS)
Google Code KML Documentation
OGC KML Implementation specification
OGC Web map Services - WMS
WMS - Overview
- Open Geospatial Consortium standard for requesting
- Service Metadata (
GetCapabilities) - an XML file representing information about a specific WMS service and its component layers
- Map Images (
GetMap) - graphic files representing one or more layers from a single WMS service for a specified area of interest, and, optionally, for a specified point in time
- Feature Information (
GetFeatureInfo) - a basic representation (in a variety of formats) of the attributes associated with a specific pixel location in a map image
- A WMS will return to the requesting system one of the above products OR an error message (in XML by default)
- Related Style Layer Descriptor standard supports dynamic updating of visualization options
- OGC WMS Documentation Access Page
WMS GetCapabilities Request
| WMTVER = 1.0.0 |
R |
|
|
|
Request version |
| VERSION = version |
|
O |
O |
O |
Request version |
| SERVICE = WMS |
R |
R |
R |
R |
Service type |
| REQUEST = capabilities |
R |
|
|
|
Request name |
| REQUEST = GetCapabilities |
|
R |
R |
R |
Request name |
| UPDATESEQUENCE = string |
|
O |
O |
O |
Sequence number or string for cache control |
| Vendor-specific parameters |
O |
|
|
|
Vendor-specific parameters |
R=Required / O=Optional
WMS GetMap Request (Core)
| WMTVER = 1.0.0 |
R |
|
|
|
Request version |
| VERSION = version |
|
R |
R |
R |
Request version. |
| REQUEST = map |
R |
|
|
|
Request name. |
| REQUEST = GetMap |
|
R |
R |
R |
Request name. |
| LAYERS = layer_list |
R |
R |
R |
R |
Comma-separated list of one or more map layers. Optional (ver. 1.1, 1.1.1) if SLD parameter is present. |
| STYLES = style_list |
R |
R |
R |
R |
Comma-separated list of one rendering style per requested layer. Optional if SLD parameter is present. |
| SRS = namespace:identifier |
R |
R |
R |
|
Spatial Reference System. |
| CRS = namespace:identifier |
|
|
|
R |
Spatial Reference System. |
| BBOX = minx,miny,maxx,maxy |
R |
R |
R |
R |
Bounding box corners (lower left, upper right) in SRS units. |
| WIDTH = output_width |
R |
R |
R |
R |
Width in pixels of map picture. |
| HEIGHT = output_height |
R |
R |
R |
R |
Height in pixels of map picture. |
| FORMAT = output_format |
R |
R |
R |
R |
Output format of map. |
| TRANSPARENT = TRUE or FALSE |
O |
O |
O |
O |
Background transparency of map (default = FALSE). |
| BGCOLOR = color_value |
O |
O |
O |
O |
Hexadecimal red-green-blue color value for the background color (default = 0xFFFFFF). |
| EXCEPTIONS = exception_format |
O |
O |
O |
O |
The format in which exceptions are to be reported by the WMS (default = XML). |
| TIME = time |
|
O |
O |
O |
Time value of layer desired. |
| ELEVATION = elevation |
|
O |
O |
O |
Elevation of layer desired. |
| Other sample dimensions |
|
O |
O |
O |
Values of other dimensions as appropriate. |
| Vendor specific parameters |
O |
O |
O |
O |
Vendor specific parameters |
WMS GetFeatureInfo Request
| WMTVER = 1.0.0 |
R |
|
|
|
Request version. |
| VERSION = version |
|
R |
R |
R |
Request version. |
| REQUEST = feature_info |
R |
|
|
|
Request name. |
| REQUEST = GetFeatureInfo |
|
R |
R |
R |
Request name. |
<map_request_copy> |
R |
R |
R |
R |
Partial copy of the Map request parameters that generated the map for which information is desired |
| QUERY_LAYERS = layer_list |
R |
R |
R |
R |
Comma-separated list of one or more layers to be queried. |
| INFO_FORMAT = output_format |
O |
O |
O |
R |
Return format of feature information (MIME type). |
| FEATURE_COUNT = number |
O |
O |
O |
O |
Number of features about which to return information (default = 1). |
| X = pixel_column |
R |
R |
R |
|
X coordinate in pixels of feature (measured from upper left corner = 0) |
| I = pixel_column |
|
|
|
R |
i coordinate in pixels of feature in Map CS |
| Y = pixel_row |
R |
R |
R |
|
Y coordinate in pixels of feature (measured from upper left corner = 0) |
| J = pixel_row |
|
|
|
R |
j coordinate in pixels of feature in Map CS |
| EXCEPTIONS = exception_format |
|
O |
O |
O |
The format in which exceptions are to be reported by the WMS (default = XML). |
| Vendor-specific parameters |
O |
O |
O |
|
Optional experimental parameters. |
WMS GetCapabilities
1
2
3
4
5
| http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-
da70dc92f2cc/services/ogc/wms?
SERVICE=wms&
REQUEST=GetCapabilities&
VERSION=1.1.1
|
Live Link
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
| <?xml version='1.0' encoding="ISO-8859-1" standalone="no" ?>
<!DOCTYPE WMT_MS_Capabilities SYSTEM "http://schemas.opengis.net/wms/1.1.1/
WMS_MS_Capabilities.dtd"
[
<!ELEMENT VendorSpecificCapabilities EMPTY>
]> <!-- end of DOCTYPE declaration -->
<WMT_MS_Capabilities version="1.1.1">
<!-- MapServer version 6.0.3 OUTPUT=GIF OUTPUT=PNG OUTPUT=JPEG OUTPUT=KML SUPPORTS=PROJ
SUPPORTS=AGG SUPPORTS=FREETYPE SUPPORTS=ICONV SUPPORTS=WMS_SERVER SUPPORTS=WMS_CLIENT
SUPPORTS=WFS_SERVER SUPPORTS=WFS_CLIENT SUPPORTS=WCS_SERVER SUPPORTS=SOS_SERVER
INPUT=POSTGIS INPUT=OGR INPUT=GDAL INPUT=SHAPEFILE -->
<Service>
<Name>OGC:WMS</Name>
<Title>tl_2010_35_state10</Title>
<Abstract>WMS Service for RGIS dataset State Boundary - 2010
(6ca5428a-a78c-4c82-8120-da70dc92f2cc)</Abstract>
<KeywordList>
<Keyword>RGIS</Keyword>
<Keyword> New Mexico</Keyword>
</KeywordList>
<OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-
da70dc92f2cc/services/ogc/wms"/>
<ContactInformation>
<ContactPersonPrimary>
<ContactPerson>GStore Support</ContactPerson>
<ContactOrganization>Earth Data Analysis Center</ContactOrganization>
</ContactPersonPrimary>
<ContactPosition>technical support</ContactPosition>
<ContactAddress>
<AddressType>Mailing address</AddressType>
<Address>Earth Data Analysis Center, MSC01 1110,
1 University of New Mexico</Address>
<City>Albuquerque</City>
<StateOrProvince>NM</StateOrProvince>
<PostCode>87131</PostCode>
<Country>US</Country>
</ContactAddress>
<ContactVoiceTelephone>(505) 277-3622</ContactVoiceTelephone>
<ContactFacsimileTelephone>(505) 277-3614</ContactFacsimileTelephone>
<ContactElectronicMailAddress>gstore@edac.unm.edu</ContactElectronicMailAddress>
</ContactInformation>
<Fees>None</Fees>
<AccessConstraints>none</AccessConstraints>
</Service>
<Capability>
<Request>
<GetCapabilities>
<Format>application/vnd.ogc.wms_xml</Format>
<DCPType>
<HTTP>
<Get><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-
8120-da70dc92f2cc/services/ogc/wms?"/></Get>
<Post><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-
8120-da70dc92f2cc/services/ogc/wms?"/></Post>
</HTTP>
</DCPType>
</GetCapabilities>
<GetMap>
<Format>image/png</Format>
<Format>image/gif</Format>
<Format>image/jpeg</Format>
<Format>image/png; mode=8bit</Format>
<Format>image/tiff</Format>
<Format>application/vnd.google-earth.kml+xml</Format>
<Format>application/vnd.google-earth.kmz</Format>
<DCPType>
<HTTP>
<Get><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-
8120-da70dc92f2cc/services/ogc/wms?"/></Get>
<Post><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-
8120-da70dc92f2cc/services/ogc/wms?"/></Post>
</HTTP>
</DCPType>
</GetMap>
<GetFeatureInfo>
<Format>text/plain</Format>
<Format>application/vnd.ogc.gml</Format>
<DCPType>
<HTTP>
<Get><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-
8120-da70dc92f2cc/services/ogc/wms?"/></Get>
<Post><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-
8120-da70dc92f2cc/services/ogc/wms?"/></Post>
</HTTP>
</DCPType>
</GetFeatureInfo>
<DescribeLayer>
<Format>text/xml</Format>
<DCPType>
<HTTP>
<Get><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-
da70dc92f2cc/services/ogc/wms?"/></Get>
<Post><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-
da70dc92f2cc/services/ogc/wms?"/></Post>
</HTTP>
</DCPType>
</DescribeLayer>
<GetLegendGraphic>
<Format>image/png</Format>
<Format>image/gif</Format>
<Format>image/jpeg</Format>
<Format>image/png; mode=8bit</Format>
<DCPType>
<HTTP>
<Get><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-
da70dc92f2cc/services/ogc/wms?"/></Get>
<Post><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-
da70dc92f2cc/services/ogc/wms?"/></Post>
</HTTP>
</DCPType>
</GetLegendGraphic>
<GetStyles>
<Format>text/xml</Format>
<DCPType>
<HTTP>
<Get><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-
da70dc92f2cc/services/ogc/wms?"/></Get>
<Post><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-
da70dc92f2cc/services/ogc/wms?"/></Post>
</HTTP>
</DCPType>
</GetStyles>
</Request>
<Exception>
<Format>application/vnd.ogc.se_xml</Format>
<Format>application/vnd.ogc.se_inimage</Format>
<Format>application/vnd.ogc.se_blank</Format>
</Exception>
<VendorSpecificCapabilities />
<UserDefinedSymbolization SupportSLD="1" UserLayer="0" UserStyle="1" RemoteWFS="0"/>
<Layer>
<Name>tl_2010_35_state10</Name>
<Title>tl_2010_35_state10</Title>
<Abstract>WMS Service for RGIS dataset State Boundary - 2010
(6ca5428a-a78c-4c82-8120-da70dc92f2cc)</Abstract>
<KeywordList>
<Keyword>RGIS</Keyword>
<Keyword> New Mexico</Keyword>
</KeywordList>
<SRS>EPSG:4269</SRS>
<SRS>EPSG:4326</SRS>
<SRS>EPSG:4267</SRS>
<SRS>EPSG:26913</SRS>
<SRS>EPSG:26912</SRS>
<SRS>EPSG:26914</SRS>
<SRS>EPSG:26713</SRS>
<SRS>EPSG:26712</SRS>
<SRS>EPSG:26714</SRS>
<SRS>EPSG:3857</SRS>
<LatLonBoundingBox minx="-109.05" miny="31.3322" maxx="-103.002" maxy="37.0003" />
<BoundingBox SRS="EPSG:4326"
minx="-109.05" miny="31.3322" maxx="-103.002" maxy="37.0003" />
<Layer queryable="1" opaque="0" cascaded="0">
<Name>tl_2010_35_state10</Name>
<Title>tl_2010_35_state10</Title>
<Abstract>State Boundary - 2010</Abstract>
<KeywordList>
<Keyword></Keyword>
</KeywordList>
<SRS>epsg:4326</SRS>
<LatLonBoundingBox minx="-109.05" miny="31.3322" maxx="-103.002" maxy="37.0003" />
<BoundingBox SRS="epsg:4326"
minx="-109.05" miny="31.3322" maxx="-103.002" maxy="37.0003" />
<MetadataURL type="FGDC-STD-001-1998">
<Format>text/xml</Format>
<OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple"
xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-da70dc92f2cc/metadata/FGDC-STD-001-1998.xml"/>
</MetadataURL>
<Style>
<Name>default</Name>
<Title>default</Title>
<LegendURL width="72" height="22">
<Format>image/png</Format>
<OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple"
xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-da70dc92f2cc/services/ogc/wms?version=1.1.1&service=WMS&request=GetLegendGraphic&layer=tl_2010_35_state10&format=image/png&STYLE=default"/>
</LegendURL>
</Style>
</Layer>
</Layer>
</Capability>
</WMT_MS_Capabilities>
|
WMS GetMap
1
2
3
4
5
6
7
8
9
10
11
12
13
| http://gstore.unm.edu/apps/rgis/datasets/
6ca5428a-a78c-4c82-8120-da70dc92f2cc/
services/ogc/wms?
VERSION=1.1.1&
SERVICE=WMS&
REQUEST=GetMap&
BBOX=-109,31,-102.9,37.1&
LAYERS=tl_2010_35_state10&
WIDTH=200&
HEIGHT=200&
SRS=EPSG:4326&
FORMAT=image/jpeg&
STYLES=
|
link
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| http://gstore.unm.edu/apps/rgis/datasets/
6ca5428a-a78c-4c82-8120-da70dc92f2cc/
services/ogc/wms?
VERSION=1.1.1&
SERVICE=WMS&
REQUEST=GetMap&
BBOX=-109,31,-102.9,37.1&
LAYERS=tl_2010_35_state10&
WIDTH=300&
HEIGHT=300&
SRS=EPSG:4326&
TRANSPARENT=TRUE&
FORMAT=image/png&
STYLES=
|
link
Integraton of WMS and KML
- The KML GroundOverlay element may be used to integrate a network accessible map image into a client
- A WMS service may be used to as the source of a KML GroundOverlay element
- KML includes parameterizations that allow for dynamic generation of WMS requests using client bounding box information
- Time-enabled WMS may be accessed through use of manually configured time parameters in WMS URLs and TimeStamp or TimeSpan KML elements
Sample WMS-KML Integration
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2"
xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
<GroundOverlay>
<name>RGIS Counties WMS</name>
<Icon>
<href>http://gstore.unm.edu/apps/rgis/datasets/107046/services/ogc/wms?
VERSION=1.1.1&SERVICE=WMS&REQUEST=GetMap&BBOX=-109,31,-102.9,37.1
&LAYERS=tl_2010_35_state10&WIDTH=800&HEIGHT=800&SRS=EPSG:4326
&FORMAT=image/png&STYLES=</href>
<viewRefreshMode>onStop</viewRefreshMode>
</Icon>
<LatLonBox>
<north>37.32753828398865</north>
<south>30.86418272137246</south>
<east>-101.3630220689848</east>
<west>-110.6891149310152</west>
</LatLonBox>
</GroundOverlay>
</kml>
|
Sample KML File
Overview
- OGC Web Feature Services (WFS)
- Capabilities and purpose
- Overview of the collection of WFS commands
- Sample WFS requests
- OGC Web Coverage Services (WCS)
- Capabilities and purpose
- Overview of the collection of WCS commands
- Sample WCS requests
OGC Web Feature Service (WFS)
Background
The documents related to the OGC WFS standard are available from: http://www.opengeospatial.org/standards/wfs and all operation parameter tables presented here are based upon the OpenGIS Web Feature Service 2.0 Interface Standard - Panagiotis (Peter) A. Vretanos, editor - 2010-11-02
From the Version 2.0.0 WFS Scope Section:
This International Standard specifies the behaviour of a service that provides transactions on and access to geographic features in a manner independent of the underlying data store. It specifies discovery operations, query operations, locking operations, transaction operations and operations to manage stored parameterized query expressions.
Discovery operations allow the service to be interrogated to determine its capabilities and to retrieve the application schema that defines the feature types that the service offers.
Query operations allow features or values of feature properties to be retrieved from the underlying data store based upon constraints, defined by the client, on feature properties.
Locking operations allow exclusive access to features for the purpose of modifying or deleting features.
Transaction operations allow features to be created, changed, replaced and deleted from the underlying data store.
Stored query operations allow clients to create, drop, list and described parameterized query expressions that are stored by the server and can be repeatedly invoked using different parameter values.
WFS Requests/Operations
These request types are submitted as part of the required REQUEST key in a KVP HTTP GET request.
GetCapabilities
- service metadata (XML) that documents the types of features supported by the service and the operations supported by each feature type
DescribeFeatureType
- metadata (XML) that describes the structure of supported feature types
GetPropertyValue
- a request for the value(s) of a specified property for a specified featuretype
GetFeature (GetFeatureWithLock)
- a request for actual features (XML, or other formats) from the service. The request may include both spatial and non-spatial query constraints
LockFeature
- Feature locking operation
Transaction
- a request to a WFS that may create, update, or delete features
CreateStoredQuery
- a request to create a named WFS query that is stored on the server for future reuse
DropStoredQuery
- a request to remove a named WFS query that has previously been stored on the server
ListStoredQueries
- a request to retrieve a list of named WFS queries that have been stored on the server
DescribeStoredQueries
- a request for more detailed information about specific named WFS queries that are stored on the server
WFS 2.0.0 Requests and their corresponding WFS Compliance Levels
GetCapabilities |
 |
 |
 |
 |
 |
 |
DescribeFeatureType |
 |
 |
 |
 |
 |
 |
ListStoredQueries |
|
 |
 |
 |
 |
 |
DescribeStoredQueries |
|
 |
 |
 |
 |
 |
GetFeature |
 |
 |
 |
 |
 |
 |
StoredQuery |
|
 |
 |
 |
 |
 |
GetPropertyValue |
|
 |
|
 |
 |
 |
Transaction |
 |
 |
|
|
 |
 |
GetFeatureWithLock |
 |
 |
|
|
|
 |
LockFeature |
 |
 |
|
|
|
 |
GetGMLObject |
 |
|
|
|
|
|
Request Composition
Requests submitted to a WFS may be submitted either via
- HTTP GET
- a request that includes all request parameters within the URL submitted to the service. Request parameters are included in the URL as “key=value” pairs (KVPs)
- HTTP POST
- a request where the URL consists of only the Host and path, with all other request parameters included in the body of the POST document submitted to the service. The request parameters supplied to the server are encoded as XML within the POST document.
- SOAP
- a request submitted as an encapsulated message within a SOAP transaction.
Servers implementing WFS may support either the HTTP GET, POST, or SOAP request model
Conceptually FeatureType = Layer
KVP for Base WFS Requests
Base request parameters for all HTTP GET KVP requests
VERSION is required for all operations except the GetCapabilities request
Sample GetCapabilities Requests
Sample request to USGS Framework Layer (Governmental Units) WFS Service advertised by the USGS TNM Access API page service list - Live Link
http://services.nationalmap.gov/arcgis/services/WFS/govunits/MapServer/WFSServer?
request=GetCapabilities&
service=WFS
Sample request to NM RGIS (NM 2010 Census Block Groups) - Live Link
http://gstore.unm.edu/apps/rgis/datasets/715663ba-c1c3-414c-84a7-c671526f8316/services/ogc/wfs?
SERVICE=wfs&
REQUEST=GetCapabilities&
VERSION=1.0.0
KVP for DescribeFeatureType Request
DescribeFeatureType HTTP GET KVP request
Sample DescribeFeatureType Requests
USGS Framework Layer (Governmental Units) WFS Service linked from the USGS TNM Access API page service list - Live Link
http://services.nationalmap.gov/arcgis/services/WFS/govunits/MapServer/WFSServer?
version=1.1.0&
request=DescribeFeatureType&
service=WFS&
typeName=WFS_govunits:State_or_Territory_High-res
Sample request to NM RGIS (NM 2010 Census Block Groups) - Live Link
http://gstore.unm.edu/apps/rgis/datasets/715663ba-c1c3-414c-84a7-c671526f8316/services/ogc/wfs?
VERSION=1.0.0&
SERVICE=wfs&
REQUEST=DescribeFeatureType&
TYPENAME=tl_2010_35_bg10
KVP for GetFeature Request
GetFeature HTTP GET KVP request
KVP for GetFeature Request - Presentation Parameters
KVP for GetFeature Request - Resolve Parameters
Sample GetFeature Requests
USGS Framework Layer (Governmental Units) WFS Service linked from the USGS TNM Access API page service list - Live Link
Note: TYPENAME for VERSION=1.1.0 instead of TYPENAMES for VERSION=2.0.0
http://services.nationalmap.gov/arcgis/services/WFS/govunits/MapServer/WFSServer?
VERSION=1.1.0&
REQUEST=GetFeature&
SERVICE=WFS&
TYPENAME=WFS_govunits:State_or_Territory_High-res
Alternative request (Live Link) that includes an OUTPUTFORMAT parameter
http://services.nationalmap.gov/arcgis/services/WFS/govunits/MapServer/WFSServer?
VERSION=1.1.0&
REQUEST=GetFeature&
SERVICE=WFS&
TYPENAME=WFS_govunits:State_or_Territory_High-res&
OUTPUTFORMAT=text/xml;%20subType=gml/3.1.1/profiles/gmlsf/1.0.0/0
OGC Web Coverage Services
Background
The documents related to the OGC WCS standard are available from: [http://www.opengeospatial.org/standards/wcs][wcs] with the sample parameters in the following slides based upon the OGC Web Coverage Service 2.0 Interface Standard - KVP Protocol Binding Extension - Peter Baumann, editor - 2010-10-27
From the OGC WCS 2.0 Introduction
The OGC Web Coverage Service (WCS) supports electronic retrieval of geospatial data as "coverages" – that is, digital geospatial information representing space/time-varying phenomena.
This document specifies the WCS core; every implementation of a WCS shall adhere to this standard. This standard thus defines only basic requirements. Extensions to the core will define extensions to meet additional requirements, such as the response encoding. Indeed, additional extensions are required in order to completely specify a WCS for implementation.
A WCS provides access to coverage data in forms that are useful for client-side rendering, as input into scientific models, and for other clients. The WCS may be compared to the OGC Web Feature Service (WFS) and the Web Map Service (WMS). As WMS and WFS service instances, a WCS allows clients to choose portions of a server's information holdings based on spatial constraints and other query criteria.
WCS Requests/Operations
GetCapabilities
- service metadata (XML) that documents the service, including brief information about the data coverages available from the service
DescribeCoverage
- a request for more detailed metadata (XML) for one or more coverages listed in the output of the GetCapabilities request
GetCoverage
- a request for an actual data product representing a specified coverage. The specific data formats available for delivery will vary from service to service.
Request Composition
Requests submitted to a WCS may be submitted either via the following protocols, as defined in the three extensions developed thus far for the core WCS standard.
- HTTP GET
- a request that includes all request parameters within the URL submitted to the service. Request parameters are included in the URL as “name=value” pairs. Extension Link
- HTTP POST
- a request where the URL consists of only the Host and path, with all other request parameters included in the body of the POST document submitted to the service. The request parameters supplied to the server are encoded as XML within the POST document. Extension Link
- XML/SOAP
- a request-response model between the client that conforms with the W3C SOAP web services protocol Extension Link
KVP for Base WCS Requests
| service |
M |
Identifier of the OGC service |
String, fixed to "WCS" |
| request |
M |
Request type name |
String, set to operation name |
| version |
M (except for GetCapabilities) |
Request protocol version |
String |
Sample WCS GetCapabilities requests
NOAA Global Forecast System THREDDS catalog. Live Link
http://nomads.ncdc.noaa.gov/thredds/wcs/gfs-004/201602/20160228/
gfs_4_20160228_0000_384.grb2?
service=WCS&
version=1.0.0&
request=GetCapabilities
New Mexico Resource Geographic Information System PRISM Precipitation Normals WCS Service. Live Link
http://gstore.unm.edu/apps/rgis/datasets/2ce10b57-3925-4971-b876-b6fc66d3cca2/services/ogc/wcs?
SERVICE=wcs&
REQUEST=GetCapabilities&
VERSION=1.1.2
KVP for DescribeCoverage Request
DescribeCoverage HTTP GET KVP request (Figure 1)
Sample DescribeCoverage Request
NOAA Global Forecast System THREDDS catalog. Live Link
http://nomads.ncdc.noaa.gov/thredds/wcs/gfs-004/201602/20160228/
gfs_4_20160228_0000_384.grb2?
service=WCS&
version=1.0.0&
request=DescribeCoverage&
COVERAGE=Categorical_Rain
New Mexico Resource Geographic Information System PRISM Precipitation Normals WCS Service. Live Link
http://gstore.unm.edu/apps/rgis/datasets/2ce10b57-3925-4971-b876-b6fc66d3cca2/services/ogc/wcs?
SERVICE=wcs&
REQUEST=DescribeCoverage&
VERSION=1.1.2&
COVERAGE=us_ppt_1971_2000_11
KVP for GetCoverage Request
GetCoverage HTTP GET KVP request (Figure 1)
Subset Definition for GetCoverage Request
Subset definition for the GetCoverage HTTP GET KVP request
Example from the 2.0 specification:
http://www.myserver.org:port/path?
service=WCS
&version=2.0
&request=GetCoverage
&coverageId=C0002
&subset=lon,http://www.opengis.net/def/crs/EPSG/0/4326(-71,47)
&subset=lat,http://www.opengis.net/def/crs/EPSG/0/4326(-66,51)
&subset=t,http://www.opengis.net/def/trs/ISO- 8601/0/Gregorian+UTC("2009-11-06T23:20:52Z")
Sample GetCoverage Request
New Mexico Resource Geographic Information System PRISM Precipitation Normals WCS Service. Live Link
http://gstore.unm.edu/apps/rgis/datasets/2ce10b57-3925-4971-b876-b6fc66d3cca2/services/ogc/wcs?
SERVICE=wcs&
REQUEST=GetCoverage&
VERSION=1.1.2&
COVERAGE=us_ppt_1971_2000_11&
CRS=urn:ogc:def:crs:EPSG::4326&
BBOX=24.0625,-125.02083333333,49.93749998965,-66.47916669008&
FORMAT=image/tiff&
WIDTH=2048&
HEIGHT=905
Overview
OpenLayers Capabilities
- Support for Multiple basemaps: BingMaps, OpenStreetMap, Stamen
- Model for interaction with multiple map server platforms: ArcGIS (REST), MapServer, GeoServer
- Support for key OGC standards: WMS, WMTS, WFS, GML, KML
- Multiple control types: Attribution, Zoom, Overview, Scale, FullScreen, Graticule
- Custom styled features with associated attributes: Curve, LinearRing, LineString, MultiLineString, MultiPoint, MultiPolygon, Point, Polygon
- Support for many formats for data read and write: ATOM, GML (1, 2, 3), GeoJSON, GPX, KML, WKT, any many others
- Open Source, enabling modification and integration into other systems (e.g. GeoExt)
Distinguishing Characteristics Between OpenLayers and Google Maps
- Greater emphasis on client-side processing - Client access and rendering of data files that Google's servers otherwise take care of (pros & cons to this approach)
- Integrated support for OGC services and their products
- Support for different projections (adds complexity)
- API more rich in options ==> more complexity
Resources
OpenLayers Home Page
Application Programming Interface (API) Reference
Examples
Demonstrations and Examples
OpenLayers_01.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <html>
<head>
<link rel="stylesheet" href="css/OpenLayers_01.css" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/
openlayers/4.0.1/ol.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.0.1/ol.js"
type="text/javascript"></script>
</head>
<body>
<h1>This is a very simple OpenLayers 4 sample map page</h1>
<div id='map'><!-- This is where the map will be displayed --></div>
<!-- import the external Javascript file with the map configuration code -->
<script src="js/OpenLayers_01.js" type="text/javascript"></script>
</body>
</html>
|
OpenLayers_01.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| // OpenLayers_01.js
var myMap = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([-106.624083,35.08427]),
zoom: 18
})
});
|
OpenLayers_01.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| /* OpenLayers_01.css */
body {
width:100%;
height:100%
}
#map,.map {
width:600px;
height:400px;
}
#map_selector li {
cursor:pointer;
width:350px;
}
#map_selector li:hover {
background-color: yellow;
}
#map div.ol-viewport
div.ol-overlaycontainer-stopevent
div.ol-overviewmap.ol-unselectable.ol-control.ol-uncollapsible {
top: 200px;
bottom: 300px;
}
|
Demonstration and Examples - Online Resources
Next Week - Custom Features and WMS Layers
Overview
More detailed Map Object Options
More detailed Layer Object Options
Additional Map Layer Types - With Examples
Map Object Options
A variety of strategies for constructing a new OpenLayers.Map object
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
| // create a map with minimum required elements and default
// options in an element with the id "map1"
var myMap = new ol.Map({
target: 'map1',
// a map without layers can be defined and in that case a map with no layers
// will be rendered
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([-106.624083,35.08427]),
zoom: 18
})
});
// create a map with options specified in a separate 'options' variable and
// included by reference in the code to create the new map object
var options = {
// required options
target:'map2',
layers: ...,
view: ...,
// optional options - only include those that you need
controls: ...,
pixelRatio: ...,
interactions: ...,
keyboardEventTarget: ...,
loadTilesWhileAnimating: ...,
loadTilesWhileInteracting: ...,
logo: ...,
overlays: ...,
renderer: ...
};
var map = new ol.Map(options);
// map with non-default options - same as above but with a single argument
var map = new ol.Map({
// required options
target:'map2',
layers: ...,
view: ...,
// optional options - only include those that you need
controls: ...,
pixelRatio: ...,
interactions: ...,
keyboardEventTarget: ...,
loadTilesWhileAnimating: ...,
loadTilesWhileInteracting: ...,
logo: ...,
overlays: ...,
renderer: ...
});
// the following commands can be executed to add, set or remove the layers in a map
// after a map object has been created
map.addLayer(layer)
map.removeLayer(layer)
map.setLayerGroup(layerGroup)
// the view of a layer can be created or modified after the map object has been
// created by using the following command
map.setView()
// the target DOM object for the map object can be set or changed using
// the following command
map.setTarget
|
Layer Object Options
Layer Types and a subset of sources for each type
ol.layer.Image - a single map image is rendered for this layer type
ol.source.ImageMapGuide - API source is a MapGuide server hosting data of interest.
ol.source.ImageStatic - API source renders a specified static image file within a specified extent within the map.
ol.source.ImageWMS - API source retrieves a single map image from the specified OGC Web Map Service (WMS).
ol.source.ImageArcGISRest - API source retrieves a single map image from the specified ArcGIS REST service.
ol.layer.Tile - map images in a tiled grid are rendered for this layer type
ol.source.TileArcGISRest - API source is an ArcGIS REST map or image service
ol.source.TileWMS - API source is an OGC Web Map Service (WMS)
ol.source.WMTS - API source is an OGC Web Map Tile Service (WMTS)
ol.layer.VectorTile - map content is delivered vector data that has been divided into a tile grid and cannot be edited
ol.source.VectorTile - API source delivers vector data tiles for rendering in the client
ol.layer.Vector - map content is delivered as vector data that is rendered by the client and may be edited within the client
ol.source.Vector - API the source for vector feature(s) that constitute a vector layer. The individual features are ol.Feature objects that consist of at least one geometry, or a collection of geometries and any additional attributes that are associated with each feature.
Common Pattern of Layer Object Creation (varies some depending upon the specific layer type)
1
2
3
4
5
6
| var layer = new ol.layer.***({
source: new ol.source.***({
...
}),
other options ...
})
|
Additional Map and Layer Object Functions & Events
Both Map and Layer Objects have a number of associated functions as well
- Retrieving object properties programmatically with
Get functions.
- Modifying existing object properties with
Set functions
- Map destruction, and reconfiguration
- Linkage of object events with Javascript functions
WMS Layer Configuration
Some key issues to be aware of when using the two WMS supporting layers (ol.layer.Tile, and ol.layer.Image) and their associated WMS sources (ol.source.TileWMS and ol.source.ImageWMS respectively) include:
- The projection of the map object must be supported by the included WMS service (review the WMS GetCapabilities response to see what projections are supported by the service). If you don't specify a
projection parameter as part of the map object's view property a default Web Mercator (EPSG:3857) projection is used for the map. Information about how to define and set map projections in OpenLayers is found here
- The layers parameter as part of the
params option must be provided as part of the server-related property list (the layer names may also be found in the GetCapabilities response)
- Other WMS parameters (again as part of the
params option) may be provided as well to "adjust" the request automatically generated by OpenLayers
- Use of a tiled WMS may produce unwanted repetition of labels included in the WMS. If that is the case you can use a single-image
ol.layer.Image layer type to allow the WMS server to handle the distribution of layers across the entire map image instead of including them in each individual map image.
Sample WMS Layer Object Creation
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
| // OpenLayers_03_wms.js
///////////////////////////////////////////////////////////////////////////////
// define layer objects
var basemap_tiled = new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'https://basemap.nationalmap.gov/arcgis/services/USGSTopo/MapServer/WmsServer?',
params: {
LAYERS: 0,
FORMAT: 'image/png',
TRANSPARENT: true
},
attributions: [
new ol.Attribution({
html: 'Data provided by the <a href="http://basemap.nationalmap.gov">National Map</a>.'
})
]
})
})
var basemap_single = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: 'https://basemap.nationalmap.gov/arcgis/services/USGSTopo/MapServer/WmsServer?',
params: {
LAYERS: 0,
FORMAT: 'image/png',
TRANSPARENT: true
},
attributions: [
new ol.Attribution({
html: 'Data provided by the <a href="http://basemap.nationalmap.gov">National Map</a>.'
})
]
})
})
var states_single = new ol.layer.Image({
source: new ol.source.ImageWMS({
attributions: new ol.Attribution({
html: 'State Boundary Restructured - USGS, National Atlas Release 5-14-12'
}),
params: {'LAYERS':'global:statep010'},
url: 'http://mapper.internetmapping.net:8081/geoserver/global/wms?',
serverType: 'geoserver'
})
})
var states_tiled = new ol.layer.Tile({
source: new ol.source.TileWMS({
attributions: new ol.Attribution({
html: 'State Boundary Restructured - USGS, National Atlas Release 5-14-12'
}),
params: {'LAYERS':'global:statep010'},
url: 'http://mapper.internetmapping.net:8081/geoserver/global/wms?',
serverType: 'geoserver'
})
})
///////////////////////////////////////////////////////////////////////////////
// create our base map objects
var singleMap = new ol.Map({
target: 'map_image',
layers: [basemap_single,states_single], //[basemap_single,states_single]
view: new ol.View({
// the approximate geographic center of the continental US
center: ol.proj.fromLonLat([-98.58,39.83]),
zoom: 3,
projection: 'EPSG:3857'
})
});
var tiledMap = new ol.Map({
target: 'map_tiled',
layers: [basemap_tiled,states_tiled], //[basemap_tiled,states_tiled]
view: new ol.View({
// the approximate geographic center of the continental US
center: ol.proj.fromLonLat([-98.58,39.83]),
zoom: 3,
projection: 'EPSG:3857'
})
});
var mixedMap = new ol.Map({
target: 'map_mixed',
layers: [basemap_tiled,states_single], //[basemap_tiled,states_single]
view: new ol.View({
// the approximate geographic center of the continental US
center: ol.proj.fromLonLat([-98.58,39.83]),
zoom: 3,
projection: 'EPSG:3857'
})
});
///////////////////////////////////////////////////////////////////////////////
|
Example: HTML, Javascript
Vector Layer Configuration
Vector layers support
- External Data in a Variety of supported formats for both reading and writing (just a sample): GML 2 and GML 3, GPX, GeoJSON, KML, WFS, WKT, Open Streetmap XML
- Directly encoded geometries: Circle, Geometry, GeometryCollection, LinearRing, LineString, MultiLineString, MultiPoint, MultiPolygon, Point, Polygon, SimpleGeometry
- User created features, including support for interactive editing of features
- Styling of Vector features
Sample Point Feature Object creation
1
2
3
4
5
| var classroomCoord = [-106.624073,35.084280]
var officeCoord = [-106.624899,35.084506]
var classroomPoint = new ol.geom.Point(ol.proj.fromLonLat(classroomCoord, projection));
var officePoint = new ol.geom.Point(ol.proj.fromLonLat(officeCoord, projection));
|
Sample KML Layer Object creation with style
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
| ///////////////////////////////////////////////////////////////////////////////
// define some styles
var block_color = [0,255,0,.1]
var block_line_color = [0,255,0,1]
var county_color = [124,124,255,.25]
var county_line_color = [124,124,255,1]
var county_style = new ol.style.Style({
fill: new ol.style.Fill({
color: county_color
}),
stroke: new ol.style.Stroke({
color: county_line_color,
width: 2
}),
});
var block_style = new ol.style.Style({
fill: new ol.style.Fill({
color: block_color
}),
stroke: new ol.style.Stroke({
color: block_line_color,
width: 1
}),
});
///////////////////////////////////////////////////////////////////////////////
// unstyled layers
var blocks_kml = new ol.layer.Vector({
source: new ol.source.Vector({
url: 'https://s3.amazonaws.com/kkb-web/data/tl_2010_35001_tabblock10.kml',
projection: projection,
format: new ol.format.KML()
})
})
var counties_kml = new ol.layer.Vector({
source: new ol.source.Vector({
url: 'https://s3.amazonaws.com/kkb-web/data/2007fe_35_county00.kml',
projection: projection,
format: new ol.format.KML()
})
})
// styled layers
var counties_kml_styled = new ol.layer.Vector({
source: new ol.source.Vector({
url: 'https://s3.amazonaws.com/kkb-web/data/2007fe_35_county00.kml',
projection: projection,
format: new ol.format.KML({
extractStyles:false
})
}),
style: county_style
})
var blocks_kml_styled = new ol.layer.Vector({
source: new ol.source.Vector({
url: 'https://s3.amazonaws.com/kkb-web/data/tl_2010_35001_tabblock10.kml',
projection: projection,
format: new ol.format.KML({
extractStyles:false
})
}),
style: block_style
})
|
Example: HTML, Javascript
Overview
- Common Model for Client Configuration for Connections to Remote OGC Services
- Specific Client Examples
Quantum GIS (QGIS)
ArcGIS
Common Model
Based upon the results of a GetCapabilities request against a remote service. GetCapabilities request information provided as either:
- The base URL to which the OGC service parameters would be added
- A complete GetCapabilities request against the service
Full GetCapabilities Request
NASA Earth Observations (NEO) Imagery WMS
http://neowms.sci.gsfc.nasa.gov/wms/wms?version=1.3.0&service=WMS&request=GetCapabilities
USGS Service Endpoints - http://services.nationalmap.gov/arcgis/services/USGSTopoLarge/MapServer/WMSServer?request=GetCapabilities&service=WMS
Base URL for GetCapabilities
NASA Earth Observations (NEO) Imagery WMS
http://neowms.sci.gsfc.nasa.gov/wms/wms?
USGS Service Endpoints - http://services.nationalmap.gov/arcgis/services/USGSTopoLarge/MapServer/WMSServer?
Quantum GIS (QGIS)
QGIS uses the Base URL approach for adding WMS, WFS or WCS layers to a project.
The General Process:
- Add service, or select existing service
- Connect to the service to retrieve the information from the GetCapabilities response for the service
- Select layer(s)
- Modify settings for layer(s)
- Add layer(s)
QGIS OGC Documentation
QGIS - Adding Services and Layers - start
You need to know the GetCapabilities request for the service you want to add, for example one of the USGS WMS services
http://services.nationalmap.gov/arcgis/services/USGSTopoLarge/MapServer/WMSServer?request=GetCapabilities&service=WMS
determine the base URL -
http://services.nationalmap.gov/arcgis/services/USGSTopoLarge/MapServer/WMSServer
in this case
If in doubt, check the information in the metadata
Select the layer type you would like to from "Layer" menu, or click the button in the interface to add a specific layer type.
QGIS - Adding Services and Layers - adding a service
Add a service to the list of services in the menu (if necessary - QGIS retains information about previously added services) by selecting the "New" option under the service list in the "Add Layer(s) from a Server" dialog
Add the name, base URL and any additional information about the service to the connection dialog box
QGIS - Adding Services and Layers - connecting to and adding layers from the service
After adding the service, you can select it from the service list in the "Add Layer(s) from a Server" dialog box, connect to the service to retrieve the GetCapabilities response from the service, select the layers and other options advertised by the service through its response, and add them to your map.
QGIS - Adding Services and Layers - the final added layer
After adding the layer, it appears as an available layer in the table of contents for your map.
QGIS Demonstration with WMS, WFS and WCS Services
WMS, WFS and WCS in QGIS
Example
ArcGIS
Based upon the results of a GetCapabilities request against a remote service. GetCapabilities request information provided as either:
- The base URL to which the OGC service parameters would be added
- A complete GetCapabilities request against the service
This model applies to ArcGIS just as it did for Quantum GIS - the base URL is provided to the various ArcGIS components that support the addition of OGC services to the client interface.
ArcGIS OGC Support Documentation
ArcGIS WMS and WCS Configuration
The addition of OGC WMS and WCS layers to ArcMap is through the same process of
- Select the "add data" button
- WMS/WCS services are added through the "GIS Servers" option in the "Add Data" dialog
- If you have not previously added the service from which you want to add layers, you select "Add WMS Server" or "Add WCS Server" from the list of options in the "Add Data" dialog
- You then provide the BASE GetCapabilities URL to the "ADD WMS/WCS Server" dialog that appears
- Click "OK", and the new WMS/WCS service is added to the list of services that is available when you choose to add a WMS service.
- You then select the layer(s) from the service that you want to add to your map and click the "add" button in the dialog.
ArcGIS WMS and WCS Configuration Resources
- Adding WMS Services to ArcMap 10.4
ESRI Documentation
- Adding WCS Services to ArcMap 10.4
ESRI Documentation
ArcGIS WFS Configuration
- WFS support in ArcGIS 10.0 and beyond requires that the "Data Interoperability Extension" be installed (though it doesn’t have to be enabled)
- Connections to WFS services are defined through ArcCatalog's "Interoperabilty Connections" "Add Interoperability Connection" option
- After defining the connection in ArcCatalog (including the specification of the interoperabilty connection type, desired feature types, and maximum number of features to return), its feature types are available through that Interoperability Connection that may be added to ArcMap and other ArcGIS components
- Once the connection is created, WFS data may be added through the "Add Data" dialog in ArcMap
ArcGIS WFS Configuration Resources
- Steps for connecting to an OGC WFS from within ArcCatalog 10.4
ESRI Documentation
- Steps for adding a WFS service to ArcMap 10.4
ESRI Documentation
Conclusions
- A GetCapabilities request is the key for configuring most OGC client applications to access remote services
- The specific way in which the GetCapabilities request is given to the client varies from client to client
- Clients can auto/mis-configure themselves based upon the GetCapabilities XML response - when troubleshooting problems with an advertised service, try the manual request approach for the GetCapabilities, data and maps that you have learned about to determine if the service is functioning as advertised.
Overview
- SOA Review
- Server Platform
- Online Mapping Server Applications: COTS & Open Source
- What is GeoServer
- Working with GeoServer
- Demonstration
SOA Review
- Services Oriented Architecture (SOA) for Geospatial Data and Processing
- Data, Processing & Client Tiers
- Open Geospatial Consortium Interoperability Standards
- Geospatial Metadata Standards
- Internet Standards
- Web: HTML, CSS, JavaScript, XML
- SOAP - Simple Object Access Protocol
- REST - Representation State Transformation
In the context of server platforms for online mapping with OGC services, there are several components that are of interest
- The operating system - the software environment in which all applications on a computer operate (e.g. Windows, Mac OS X, Linux)
- The web server - the application that listens for incoming requests from the Internet (e.g. Apache, IIS)
- The mapping server - the application (that may also include the web server) that enables online mapping applications, that may include support for one or more OGC service interfaces (e.g. GeoServer, MapServer, CubeWerx, ArcGIS Server)
Online Mapping Server Applications
Sample Commercial Off-the-Shelf (COTS)
- ArcGIS Enterprise (info)
- CubeWerx SDI Suite (info)
- ERDAS APOLLO (info)
Sample Open Source
What is GeoServer
GeoServer is an Open Source, Open Standards supporting geospatial web services platform
- GNU General Public License
- WMS, WFS, WCS
- Written in Java as a web application commonly hosted on the Jetty HTTP server and Java servlet engine
- An appropriate version of Java must already be installed
Working with GeoServer
OS-Independent Binaries are Available for Multiple Platforms (these are just ‘run’ to start the server)
- Includes the Jetty HTTP server
- Windows, Mac OS X, Linux
- There are OS-specific configuration instructions for each operating system
GeoServer may be integrated into existing Java web servlet applications (such as Apache Tomcat) using the available Web Archive (WAR) file.
OS-Specific Installers are also Available
- Include an integrated HTTP server
- Windows and Mac OS X
[Installation Information] (http://docs.geoserver.org/stable/en/user/installation/)
What is Happening Behind the Scenes
Setup and Configuration
- After the initial setup as part of the installation process, other setup and configuration is performed through the web interface
- All configuration activities require that you are logged in as an administrator
- Default username and password for a new GeoServer are
admin:geoserver - this should be changed as soon as you start up a new server instance.
- After logging in you can view and modify the configuration of the server and services - some of the configuration elements inform the OGC service capabilities
Server Configuration Options
- Server Status - summary information about the status of the currently running server
- GeoServer Logs - access to the application logs for diagnosing issues with the server
- Contact Information - contact information for the person responsible for providing support for the server and services. This information is used to build parts of the Capabilities XML metadata returned by the services
- About GeoServer - links to information about GeoServer
- Image Processing - advanced image processing and raster encoding
- Raster Access - settings for accessing raster data
WxS Service Configuration Options
Options Common to all WxS services
- Enable/disable the service, with or without strict CITE compliance
- Maintainer and Online Resource URLs
- Title/Abstract
- Fees/Access Constraints
- Keywords
Options specific to individual services
- WFS - max. no. features, service type (basic/transactional/complete), GML-specific styles, SRS styes, other options
- WMS - SRS subset specification, interpolation method, resource consumption limits, KML options, map image watermarking, PNG/JPEG/SVG format options, and others
- WCS - SRS subset specification, policies for overviews to be used, subsampling, and resource consumption limits, other options
Data Component Configuration Options
- Layer Preview - An interface through which a Layers may be previewed in a variety of formats
- Workspaces - Defined containers for related data products
- Stores - Specific data sources (file or service based) with required data type and connection information provided in the Store configuration
- Layers - Defined layers that are published by the server, with the layers based upon data provided by a Store, but with additional layer-specific settings (such as bounding box, applied and available styles,and attribution).
- Layer Groups - Collections of Layers for specific projects/applications or other logical groupings.
- Styles - A listing of defined layer styles for the server through which those styles may be accessed and managed.
Data Integration Process
Security Settings
- Settings - Basic security configuration settings: role service, encryption options
- Authentication - Configuration settings for authentication providers for users
- Passwords - Settings related to underlying password providers and policies
- Users, Groups, Roles - Management of system users, groups and defined roles
- Data - Settings for read/write access to data products within the server, settings for the system's catalog mode
- Service - Settings for managing service-level (i.e. WMS, WFS, WCS and related request types) access privileges by user role.
Demonstration of GeoServer Interface
Class GeoServer Instance
Module 5 - OGC Services and Styling in GeoServer
Overview
- GeoServer Styled Layer Descriptor (SLD) Foundation: OGC Specification
- Creation and Management of Styles in GeoServer
- Definition of Styles
- Base Styles
- Basic New Styles
- Basic Filters
OGC Styled Layer Descriptor (SLD)
OGC Styled Layer Descriptor (SLD)
Definition of Styles
Styles are XML documents that conform to the OGC SLD standard, and consist of four major components
- Symbolizers
- SLD components that define the rendering style of specific types of content
- Labels
- Defining the placement of labels
- Filters
- Allow for the application different symbolizers to defined sets of features
- Scale Elements
- Allow for the application of different symbolizers at different map scales through the definition of styling rules
Definition of Styles - Header Content
Definition of Styles - Sample SLD File
<?xml version="1.0" encoding="ISO-8859-1"?>
<StyledLayerDescriptor version="1.0.0"
xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd"
xmlns="http://www.opengis.net/sld"
xmlns:ogc="http://www.opengis.net/ogc"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<NamedLayer>
<Name>Simple Point</Name>
<UserStyle>
<Title>SLD Cook Book: Simple Point With Stroke</Title>
<FeatureTypeStyle>
<Rule>
<PointSymbolizer>
<Graphic>
<Mark>
<WellKnownName>circle</WellKnownName>
<Fill>
<CssParameter name="fill">#FF0000</CssParameter>
</Fill>
</Mark>
<Size>6</Size>
</Graphic>
</PointSymbolizer>
</Rule>
</FeatureTypeStyle>
</UserStyle>
</NamedLayer>
</StyledLayerDescriptor>
Simple GeoServer Point Style
SLD Snippet (Full SLD)
<NamedLayer>
<Name>Simple Point</Name>
<UserStyle>
<Title>SLD Cook Book: Simple Point With Stroke</Title>
<FeatureTypeStyle>
<Rule>
<PointSymbolizer>
<Graphic>
<Mark>
<WellKnownName>circle</WellKnownName>
<Fill>
<CssParameter name="fill">#FF0000</CssParameter>
</Fill>
</Mark>
<Size>6</Size>
</Graphic>
</PointSymbolizer>
</Rule>
</FeatureTypeStyle>
</UserStyle>
</NamedLayer>
Simple GeoServer Line Style
SLD Snippet (Full SLD)
<NamedLayer>
<Name>Simple Line</Name>
<UserStyle>
<Title>SLD Cook Book: Simple Line</Title>
<FeatureTypeStyle>
<Rule>
<LineSymbolizer>
<Stroke>
<CssParameter name="stroke">#000000</CssParameter>
<CssParameter name="stroke-width">3</CssParameter>
</Stroke>
</LineSymbolizer>
</Rule>
</FeatureTypeStyle>
</UserStyle>
</NamedLayer>
Simple GeoServer Polygon Style
SLD Snippet (Full SLD)
<NamedLayer>
<Name>Simple polygon</Name>
<UserStyle>
<Title>SLD Cook Book: Simple polygon</Title>
<FeatureTypeStyle>
<Rule>
<PolygonSymbolizer>
<Fill>
<CssParameter name="fill">#000080</CssParameter>
</Fill>
</PolygonSymbolizer>
</Rule>
</FeatureTypeStyle>
</UserStyle>
</NamedLayer>
Simple GeoServer Raster Style
SLD Snippet (Full SLD)
<NamedLayer>
<Name>Two color gradient</Name>
<UserStyle>
<Title>SLD Cook Book: Two color gradient</Title>
<FeatureTypeStyle>
<Rule>
<RasterSymbolizer>
<ColorMap>
<ColorMapEntry color="#008000"
quantity="70" />
<ColorMapEntry color="#663333"
quantity="256" />
</ColorMap>
</RasterSymbolizer>
</Rule>
</FeatureTypeStyle>
</UserStyle>
</NamedLayer>
PointSymbolizer
<Graphic>
<ExternalGraphic>
<OnlineResource> (Required)
<Format>
<Mark>
<WellKnownName> (Required)
<Fill>
<Stroke>
<Opacity>
<Size>
<Rotation>
LineSybolizer
<Stroke>
<GraphicFill>
<Graphic> contents same as PointSymbolizer
<GraphicStroke>
<Graphic> contents same as PointSymbolizer
<CssParameter name="...">
name="stroke"
name="stroke-width"
name="stroke-opacity"
name="stroke-linejoin"
name="stroke-linecap"
name="stroke-dasharray"
name="stroke-dashoffset"
PolygonSymbolizer
<Fill>
<GraphicFill>
<Graphic> contents same as PointSymbolizer
<CssParameter name="...">
name="fill"
name="fill-opacity"
<Stroke> same as the LineSymbolizer
Raster Symbolizer
<Opacity>
<ColorMap type="ramp | values | intervals" extended="true | false">
<ColorMapEntry color="" quantity="" label="" opacity=""/>
<ChannelSelection>
<RedChannel> <GreenChannel> <BlueChannel>
<SourceChannelName>
<GrayChannel>
<SourceChannelName>
<ContrastEnhancement>
<ShadedRelief> (not implemented in ver 2.0)
<OverlapBehavior> (not implemented in ver 2.0)
<ImageOutline> (not implemented in ver 2.0)
Filters
SLD Filter Rules and Vector Symbolization
Filters based upon Attribute Values
<PropertyIsEqualTo>
<PropertyIsNotEqualTo>
<PropertyIsLessThan>
<PropertyIsLessThanOrEqualTo>
<PropertyIsGreaterThan>
<PropertyIsGreaterThanOrEqualTo>
<PropertyIsBetween>
Logical Filters - for combining multiple filters
<And>
<Or>
<Not>
Spatial Filters
<Intersects>
<Equals>
<Disjoint>
<Within>
<Overlaps>
<Crosses>
<DWithin>
<Beyond>
<Distance>
Scale-based selection
<MaxScaleDenominator>
<MinScaleDenominator>
Attribute Filter Example
To define an Attribute Filter you need to know both the Attribute Name of the layer(s) that will use the filter and the value(s) of that field that will be used for the filter. How do you determine the attribute name and values?
- If available, this information should be available through the documentation (metadata) for the data that is published by the data provider.
- In GeoServer you can view a list of attribute names in the data tab of the layer information under the Feature Type Details at the bottom of the web page, but you can't view the actual field values.
- For vector data you can view both the attribute names and their values using the
ogrinfo command from the command line on the class linux server.
For example:
ogrinfo -fields=YES -geom=NO kb_gpsrdsdd.shp kb_gpsrdsdd
Where this command requests that the fields and their values be displayed, but that the detailed geometry information (i.e. all of the nodes associated with each feature) be suppressed in the output
Full SLD
<?xml version="1.0" encoding="ISO-8859-1"?>
<StyledLayerDescriptor version="1.0.0"
xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd"
xmlns="http://www.opengis.net/sld"
xmlns:ogc="http://www.opengis.net/ogc"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<!-- New Mexico Highways -->
<NamedLayer>
<Name>NM Roads</Name>
<UserStyle>
<Name>NM Roads</Name>
<FeatureTypeStyle>
<Rule>
<Title>NM Highways</Title>
<ogc:Filter>
<ogc:PropertyIsEqualTo>
<ogc:PropertyName>TYPE</ogc:PropertyName>
<ogc:Literal>State Highway</ogc:Literal>
</ogc:PropertyIsEqualTo>
</ogc:Filter>
<LineSymbolizer>
<Stroke>
<CssParameter name="stroke">
<ogc:Literal>#CCCCCC</ogc:Literal>
</CssParameter>
<CssParameter name="stroke-width">
<ogc:Literal>2</ogc:Literal>
</CssParameter>
</Stroke>
</LineSymbolizer>
</Rule>
<!-- US Highways -->
<Rule>
<Title>US Highways</Title>
<ogc:Filter>
<ogc:PropertyIsEqualTo>
<ogc:PropertyName>TYPE</ogc:PropertyName>
<ogc:Literal>US Highway</ogc:Literal>
</ogc:PropertyIsEqualTo>
</ogc:Filter>
<LineSymbolizer>
<Stroke>
<CssParameter name="stroke">
<ogc:Literal>#ff0000</ogc:Literal>
</CssParameter>
<CssParameter name="stroke-width">
<ogc:Literal>3</ogc:Literal>
</CssParameter>
</Stroke>
</LineSymbolizer>
<LineSymbolizer>
<Stroke>
<CssParameter name="stroke">
<ogc:Literal>#CCCCCC</ogc:Literal>
</CssParameter>
<CssParameter name="stroke-width">
<ogc:Literal>1</ogc:Literal>
</CssParameter>
</Stroke>
</LineSymbolizer>
</Rule>
<!-- Interstate Highways -->
<Rule>
<Title>Interstates</Title>
<ogc:Filter>
<ogc:PropertyIsEqualTo>
<ogc:PropertyName>TYPE</ogc:PropertyName>
<ogc:Literal>Interstate</ogc:Literal>
</ogc:PropertyIsEqualTo>
</ogc:Filter>
<LineSymbolizer>
<Stroke>
<CssParameter name="stroke">
<ogc:Literal>#fcff00</ogc:Literal>
</CssParameter>
<CssParameter name="stroke-width">
<ogc:Literal>5</ogc:Literal>
</CssParameter>
</Stroke>
</LineSymbolizer>
<LineSymbolizer>
<Stroke>
<CssParameter name="stroke">
<ogc:Literal>#222222</ogc:Literal>
</CssParameter>
<CssParameter name="stroke-width">
<ogc:Literal>3</ogc:Literal>
</CssParameter>
</Stroke>
</LineSymbolizer>
</Rule>
</FeatureTypeStyle>
</UserStyle>
</NamedLayer>
</StyledLayerDescriptor>
Attribute Filter with Scale Factor
The only change needed to introduce scale-dependencies into styles is to include <MaxScaleDenominator> or <MinScaleDenominator> elements within a rule where they should be applied. These elements should be placed just before the symbolizer element so that GeoServer can properly validate the provided SLD.
Full SLD
<?xml version="1.0" encoding="ISO-8859-1"?>
<StyledLayerDescriptor version="1.0.0"
xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd"
xmlns="http://www.opengis.net/sld"
xmlns:ogc="http://www.opengis.net/ogc"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<!-- New Mexico Highways -->
<NamedLayer>
<Name>NM Roads</Name>
<UserStyle>
<Name>NM Roads</Name>
<FeatureTypeStyle>
<Rule>
<Title>NM Highways</Title>
<ogc:Filter>
<ogc:PropertyIsEqualTo>
<ogc:PropertyName>TYPE</ogc:PropertyName>
<ogc:Literal>State Highway</ogc:Literal>
</ogc:PropertyIsEqualTo>
</ogc:Filter>
<MaxScaleDenominator>1000000</MaxScaleDenominator>
<LineSymbolizer>
<Stroke>
<CssParameter name="stroke">
<ogc:Literal>#CCCCCC</ogc:Literal>
</CssParameter>
<CssParameter name="stroke-width">
<ogc:Literal>2</ogc:Literal>
</CssParameter>
</Stroke>
</LineSymbolizer>
</Rule>
<!-- US Highways -->
<Rule>
<Title>US Highways</Title>
<ogc:Filter>
<ogc:PropertyIsEqualTo>
<ogc:PropertyName>TYPE</ogc:PropertyName>
<ogc:Literal>US Highway</ogc:Literal>
</ogc:PropertyIsEqualTo>
</ogc:Filter>
<MaxScaleDenominator>5000000</MaxScaleDenominator>
<LineSymbolizer>
<Stroke>
<CssParameter name="stroke">
<ogc:Literal>#ff0000</ogc:Literal>
</CssParameter>
<CssParameter name="stroke-width">
<ogc:Literal>3</ogc:Literal>
</CssParameter>
</Stroke>
</LineSymbolizer>
<LineSymbolizer>
<Stroke>
<CssParameter name="stroke">
<ogc:Literal>#CCCCCC</ogc:Literal>
</CssParameter>
<CssParameter name="stroke-width">
<ogc:Literal>1</ogc:Literal>
</CssParameter>
</Stroke>
</LineSymbolizer>
</Rule>
<!-- Interstate Highways -->
<Rule>
<Title>Interstates</Title>
<ogc:Filter>
<ogc:PropertyIsEqualTo>
<ogc:PropertyName>TYPE</ogc:PropertyName>
<ogc:Literal>Interstate</ogc:Literal>
</ogc:PropertyIsEqualTo>
</ogc:Filter>
<LineSymbolizer>
<Stroke>
<CssParameter name="stroke">
<ogc:Literal>#fcff00</ogc:Literal>
</CssParameter>
<CssParameter name="stroke-width">
<ogc:Literal>5</ogc:Literal>
</CssParameter>
</Stroke>
</LineSymbolizer>
<LineSymbolizer>
<Stroke>
<CssParameter name="stroke">
<ogc:Literal>#222222</ogc:Literal>
</CssParameter>
<CssParameter name="stroke-width">
<ogc:Literal>3</ogc:Literal>
</CssParameter>
</Stroke>
</LineSymbolizer>
</Rule>
</FeatureTypeStyle>
</UserStyle>
</NamedLayer>
</StyledLayerDescriptor>
Demonstrations
Class GeoServer Instance: http://geog485.unm.edu:8080/geoserver/web/
SLD Creation Using QGIS: Link to the QGIS Vector Properties Dialog Documentation.
Module 5 - OGC Services and Styling in GeoServer
Overview
Raster Symbolizer - Review
<Opacity>
<ColorMap type=ramp|values|intervals extended=true|false />
<ColorMapEntry color="" quantity="" label="" opacity=""/>
<ChannelSelection>
<RedChannel> <GreenChannel> <BlueChannel>
<SourceChannelName>
<GrayChannel>
<SourceChannelName>
<ContrastEnhancement>
<ShadedRelief> (not implemented in ver 2.0)
<OverlapBehavior> (not implemented in ver 2.0)
<ImageOutline> (not implemented in ver 2.0)
Sample Raster SLD for Color Map Examples
<?xml version="1.0" encoding="ISO-8859-1"?>
<StyledLayerDescriptor version="1.0.0"
xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd"
xmlns="http://www.opengis.net/sld"
xmlns:ogc="http://www.opengis.net/ogc"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<NamedLayer>
<Name>ElevationData</Name>
<UserStyle>
<Name>dem</Name>
<Title>Simple DEM style</Title>
<Abstract>Classic elevation color progression</Abstract>
<FeatureTypeStyle>
<Rule>
<RasterSymbolizer>
<Opacity>1.0</Opacity>
<ColorMap>
<ColorMapEntry color="#000000" quantity="-500" label="nodata" opacity="0.0" />
<ColorMapEntry color="#AAFFAA" quantity="0" label="0" />
<ColorMapEntry color="#00FF00" quantity="1000" label="1000"/>
<ColorMapEntry color="#FFFF00" quantity="1200" label="1200" />
<ColorMapEntry color="#FF7F00" quantity="1400" label="1400" />
<ColorMapEntry color="#BF7F3F" quantity="1600" label="1600" />
<ColorMapEntry color="#99CC66" quantity="2000" label="2000" />
<ColorMapEntry color="#336633" quantity="2500" label="2500" />
<ColorMapEntry color="#006600" quantity="3000" label="3000" />
<ColorMapEntry color="#FFFFFF" quantity="3500" label="3500" />
</ColorMap>
</RasterSymbolizer>
</Rule>
</FeatureTypeStyle>
</UserStyle>
</NamedLayer>
</StyledLayerDescriptor>
ColorMap Types
<ColorMap> or <ColorMap type="ramp">
<ColorMap type="intervals">
<ColorMap type="values">
Extend or Not To Extend?
<ColorMap type="ramp" extended="false"> = 256 colors in ramp (default)
<ColorMap type="ramp" extended="true"> = 65536 colors in ramp
Opacity
Options for defining opacity appear in two places in the raster symbolizer.
At the level of the entire raster dataset
Within a ColorMapEntry for a specific color definition within a ColorMap
<ColorMap>
<ColorMapEntry color="#000000" quantity="-500" label="nodata" opacity="0.0" />
<ColorMapEntry color="#AAFFAA" quantity="0" label="0" />
<ColorMapEntry color="#00FF00" quantity="1000" label="1000"/>
...
<ColorMapEntry color="#FFFFFF" quantity="3500" label="3500" />
</ColorMap>
Channel Selection
Many raster datasets contain multiple bands of values which may be viewed individually or assigned to the colors red, green, and blue to generate a color image representing a combination of band values. GeoServer allows for the specification of a single band for display as a GrayChannel or three bands as RedChannel, GreenChannel, and BlueChannel.
<?xml version="1.0" encoding="ISO-8859-1"?>
<StyledLayerDescriptor version="1.0.0"
xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd"
xmlns="http://www.opengis.net/sld"
xmlns:ogc="http://www.opengis.net/ogc"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<NamedLayer>
<Name>DOQQBands</Name>
<UserStyle>
<Name>DOQQ321</Name>
<Title>Simple DEM style</Title>
<Abstract>Classic elevation color progression</Abstract>
<FeatureTypeStyle>
<Rule>
<RasterSymbolizer>
<ChannelSelection>
<RedChannel>
<SourceChannelName>3</SourceChannelName>
</RedChannel>
<GreenChannel>
<SourceChannelName>2</SourceChannelName>
</GreenChannel>
<BlueChannel>
<SourceChannelName>1</SourceChannelName>
</BlueChannel>
</ChannelSelection>
</RasterSymbolizer>
</Rule>
</FeatureTypeStyle>
</UserStyle>
</NamedLayer>
</StyledLayerDescriptor>
Contrast Enhancement
Some raster data may need adjustment to increase the contrast (the range between the darkest and lightest values) displayed. GeoServer provides three options for contrast enhancement, each of which have a different effect on the resulting image.
- Histogram
- The values are stretched so that an equal number of pixels fall into each color in the range
- Normalize
- The minimum and maximum brightness values are mapped to the minimum and maximum raster values
- Gamma
- The image is brightened or darkened by a specified factor (negative numbers darken, positive numbers brighten)
Sample Contrast Enhancement SLD for Examples
<RasterSymbolizer>
<Opacity>1.0</Opacity>
<ChannelSelection>
<RedChannel>
<SourceChannelName>1</SourceChannelName>
<ContrastEnhancement>
<Histogram/>
</ContrastEnhancement>
</RedChannel>
<GreenChannel>
<SourceChannelName>2</SourceChannelName>
<ContrastEnhancement>
<Histogram/>
</ContrastEnhancement>
</GreenChannel>
<BlueChannel>
<SourceChannelName>3</SourceChannelName>
<ContrastEnhancement>
<Histogram/>
</ContrastEnhancement>
</BlueChannel>
</ChannelSelection>
</RasterSymbolizer>
<ContrastEnhancement>
<Normalize/>
</ContrastEnhancement>
<ContrastEnhancement>
<Histogram/>
</ContrastEnhancement>
<ContrastEnhancement>
<GammaValue>.5</GammaValue>
</ContrastEnhancement>
GeoServer Demo/Q&A
Class GeoServer Instance: http://geog485.unm.edu:8080/geoserver/web/
What We've Done ...
- Developed basic web pages
- Learned how to publish our content using GitHub
- Developed basic interactive maps based on the Google Maps API and OpenLayers
- Learned about the key data visualization and data access standards from the Open Geospatial Consortium
- Used those visualization and data access services in desktop GIS applications
- Published data using those standards, and done basic styling of those data
Whew!!! That's a bunch of work for 16 weeks. Good Job.
Where Do You Go From Here?
- Establish your own identity on the internet by getting your own domain name (e.g. Hover.com, GoDaddy and many others
- Build your personal web site focusing on what interests you (published through GitHub or any other web hosting provider)
- Continue experimenting with interactive mapping - using the Google Maps API, OpenLayers or another framework that interests you. Some additional candidates include:
- Publish your own data (you will need a server e.g. Amazon EC2, Cari.net, MapServerPro, AcuGIS, Geocortex) using GeoServer or another platform like: